Components · Controls

ButtonButton

40, 48 and 56 pills and round buttons: variants and states

npx shadcn@latest add @umbra/button

A pill with a Label (14 / 500) or a round icon button. No borders or backgrounds, color only by role

When to use

  • primary: the one main action on a screen or in a tile (“Start recording”, “Save”)
  • secondary: a regular action next to the main one (“Cancel”, “Export”)
  • ghost: a quiet secondary action (“Later”, “Learn more”)
  • destructive: deletion. Only for irreversible actions
  • icon: a round icon button when the meaning is clear without a label (in the page header: 56 button, 24 icon). Put the label in aria-label

When not to use

  • Filter or tab: Chip
  • Navigation item: Sidebar
  • Search: SearchToggle
  • Stopping a recording: the red dock button (Dock), not destructive
  • A link in text: a regular link. A link styled as a button goes through asChild

Recording settings

Apply to new meetings

Only you can see it

Do

  • One primary per tile or screen
  • Label: a verb and what to do (“Start recording”), short

Don’t

  • A faded accent as the disabled state (“muddy olive”)
  • Gradient, glow or shadow on the button
  • Custom height or radius (h-9, rounded-lg): only 40 / 48 / 56 and the pill
  • An icon button without aria-label