Button

Sharedcomponent✓ stamped

The core action button — variants and sizes, brand-tinted primary.

@brite-nites/design-system/ui/button

Seven variants + two sizes. State matrix shows Rest / Hover / Pressed / Disabled for the two tokenized variants (default & primary). Other variants follow the shadcn pattern and are live-interactive.

Default variant

Neutral at rest; picks up the brand color on hover/press. Use for most action buttons where you want the brand to appear only on interaction.

rest

hover

pressed

disabled

Primary variant

Carries the brand color at all times — the CTA. Use for the single highest-priority action on a screen (save, create, confirm).

rest

hover

pressed

disabled

Destructive variant

Matches the default variant at rest (gray, no red text) — turns red with a pink highlight gradient on hover and press. Use for Delete / Archive / Cancel actions that need a neutral resting state.

rest

hover

pressed

disabled

Secondary interaction utility — .btn-fx-secondary

Opt-in utility class. Adds neutral hover + pressed states without touching the rest state. Apply to icon buttons, tooltip triggers, and other utility widgets that shouldn't pick up the brand color.

rest

hover

pressed

shadcn variants — live interactive

Use your mouse to test real hover / active / focus states.

outlineSecondary actions, dialog cancel buttons

raisedOutline on the elevated card surface (white in light, lighter gray in dark) — for outlined controls that must read as raised against a matching background, e.g. sidebar index buttons

secondarySubtle supporting actions

ghostIcon-only / navigation / toolbar buttons

linkInline text-style action

Sizes

Applied via the size prop. Canonical 24 / 28 / 32 heights — compact-first. Horizontal padding is 2× the vertical breathing (sm=8h, default=12h, lg=16h).

sm (24px)Compact — toolbars, inline controls

default (28px)Default — forms, dialogs

lg (32px)Emphasized — prominent CTAs

icon-sm / icon / icon-lgSquare icon-only buttons — 24 / 28 / 32