Disabled
Button
Versatile button component with multiple variants, loading states, icons, and keyboard shortcuts.
Variants
Primary is electric blue (blue-700 hover); secondary is the high-contrast black/white CTA. Pink/dark/sky carry the brand pairings for special moments.
Outline & ghost
Low-emphasis variants for secondary actions (shadcn outline/ghost, adapted to our tokens). Outline carries a hairline border; ghost is borderless and flat — no hover lift. Each comes in a neutral and a brand-blue tint.
Disabled states
Disabled keeps each variant's hue at reduced strength (per the brand button-states sheet) instead of collapsing to gray.
With icons
Buttons can include a leading icon.
Loading state
Shows a spinner and disables interaction.
With keyboard shortcut
Display a keyboard shortcut hint inside the button.
Disabled
Disabled buttons with optional tooltip explaining why.