Component
Button
Pill-shaped primary action with a gradient default. Six variants, four sizes.
9:41
Default gradient + brand, outline, ghost, link
The audit called the deep-blue legacy NEXT button the single worst offender in the app. Every primary action now collapses onto variant="gradient" for celebratory moments and variant="brand" for everyday actions.
Variants
Sizes
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'gradient' | 'brand' | 'outline' | 'ghost' | 'link' | 'danger' | 'gradient' | Visual treatment. |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'icon' | 'md' | Pill height. md = 44pt mobile touch target. |
| block | boolean | false | Stretch to fill the parent width. |
| asChild | boolean | false | Render as a child element via Radix Slot (e.g. wrap a Link). |
Do / Don't
Do
- Use gradient for the single most important action per screen.
- Use brand for ongoing high-confidence actions (Post, Send).
- Pair an icon with the leading edge of celebratory CTAs.
Don't
- Don't stack two gradient buttons on one screen. One hero CTA at a time.
- Don't reintroduce a blue primary action. The legacy NEXT button is what this replaces.
- Don't override the height. Keep tap targets ≥44pt.