Buttons
Exported from Figma (page "• Button"). Core buttons (Primary / Secondary / Clear / Swipe) in four sizes with icon, dropdown and icon-only variations — plus Social buttons, Text links, Button groups, circular Menu buttons, and the Swipe-to-confirm slider set. All driven by btn/* tokens: radius 4px, Medium 500, 20px icons.
Primary Button
btn/primary/default fill, white label. Hover goes near-black (btn/primary/hover #171717); focus keeps the fill and adds a 3px brand ring. No loading state exists in Figma.
Variations
Text · Icon left · Icon right · Dropdown · Icon-only. Icons are always 20px, at every size.
Secondary Button
Transparent with #efefef outline. Hover fills grey and lifts with shadow/sm; focus fills brand blue (btn/secondary/clicked) with white text and a light-blue ring.
Clear (Text-only) Button
No container, zero padding — pure label + optional icons. Color communicates state: default #352eff → hover #7c9dff → focus/pressed #030192. Sizes lg / md / xs only (no sm, no icon-only).
Swipe Button
Bottom-sheet trigger: solid btn/swipeup/default, top corners rounded 8px, bottom square (sits flush on a screen edge). Sizes md / lg only. Focus fills the dark pressed blue.
Drag the bar upward (or tap it) to complete. It expands into a full-screen “Processing” takeover, then flips to a success screen with an animated checkmark and a Done button — the exact production flow.
Sizes
xs 24px · sm 32px · md 40px · lg ~52px. Fonts: 12 / 14 / 14 / 18px — icons stay 20px throughout.
Social Buttons
One neutral surface for every provider — brand color lives only in the icon. White bg, border/subtle outline, radius 8px, shadow/sm, label Bold 14px at every size.
Text Links
Color-only feedback — never underlined. Types Primary / Secondary / Tertiary, sizes md (20px icons) and sm (16px icons), same 14px label. Focus adds the light-blue ring.
Button Group
Segmented control: one white pill (radius 8px, shadow/sm, #dbdbdb border) holding 2–6 square items split by 1px dividers. Hover fills #ececec; there is no selected state in Figma — hover is the only filled state.
Menu Buttons
Circular quick-action buttons (the Menu component's item primitive). Primary menu/bg-primary #030192 · Secondary menu/bg-secondary #efefef · Tertiary thin border/subtle outline. lg 50px / sm 40px, optional 12px label.
Swipe to Confirm (Slider)
The Figma Swipe Set ships 12 track designs in two shapes (rounded-8 and pill-50) across four families: brand gradient, blue→peach gradient, neumorphic, and white card — plus two-handle toggle pills. The first slider below is live: drag the handle.
Drag the handle all the way to the right to follow. Completing the swipe plays the full-screen takeover — the exact production behaviour, so you can test the real interaction, not just look at a static mock.
MaV Extensions (not in Figma)
Kept from the working system: loading state with spinner, and the full-width mobile CTA. The Figma component set defines neither.
Token Reference
| Token | Light | Usage |
|---|---|---|
| --btn\/primary\/default | #352eff | Primary / Swipe fill |
| --btn\/primary\/hover | #171717 | Primary / Swipe hover |
| --btn\/primary\/clicked | #030192 | Pressed / Swipe focus fill |
| --btn\/primary\/disabled | #e5e5e5 | Disabled fill |
| --btn\/secondary\/default-outline | #efefef | Secondary border |
| --btn\/secondary\/clicked | #352eff | Secondary focus fill |
| --btn\/textonly\/default | #352eff | Clear / Text link color |
| --btn\/textonly\/hover | #7c9dff | Clear hover |
| --btn\/sliding\/default | #352eff | Slider thumb / done track |
| --btn\/swipeup\/default | #352eff | Swipe button fill |
| --menu\/bg-primary | #030192 | Menu circle, primary |
| --focus\/primary | rgba(89,156,219,.4) | 3px focus ring (Secondary/Social/Text link) |
| --shadow-focus | rgba(53,46,255,.4) | 3px focus ring (Primary/Swipe) |
| --shadow\/sm | 4× rgba(0,0,0,.05) | Resting elevation (Secondary hover, Social, Group) |