Components
Components
Stable
Button
Primary actions use the teal gradient. Keep one primary CTA per view. Use hot sparingly for high-energy marketing moments. Default height is 44px for touch accessibility.
- 1
Root
button or Slot when asChild
- 2
Icon (optional)
Lucide 16px, currentColor
- 3
Label
Verb-first, sentence case
Variants
Sizes
With icons & states
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | default | secondary | outline | ghost | hot | destructive | link | default | Visual hierarchy role (hot = coral emphasis) |
| size | default | sm | lg | icon | icon-sm | default | Control height and padding |
| asChild | boolean | false | Merge props onto child (e.g. Link) |
Do
- One gradient primary per view for the main task
- Pair icon-only buttons with aria-label
- Use hot for launches, promos, or secondary emphasis — not every row
Don’t
- Stack multiple gradient primaries side by side
- Use destructive for non-destructive cancels
- Remove focus rings for a flatter look