Buttons
A polymorphic button (render as a link or any element via `as`). Composed from variant + color + size + rounded. Below the 900px mobile breakpoint, buttons use their brighter hover treatment as the resting state so touch interfaces retain the same visual affordance. Source: src/components/ds/ui/index.tsx.
Variants
primary, secondary, ghost, link, subtle-link, and icon.
Gradient (landing CTA)
The library-landing primary call-to-action, promoted to a Button variant so the styling lives here: an accent→bright gradient with an inner highlight, a colored glow, ink text, and a hover lift. Colors map to the category accents (src/styles/app.css).
Colors
Primary variant across the full color set.
Sizes
xs, sm, md (default), lg.
Link buttons
Link is an inline text action. Subtle link is the canonical low-emphasis navigation action used by mega menus and section footers; it owns its mono label, spacing, muted color, and trailing-icon motion here.
Icon buttons
Icon-only buttons via the icon variant, in both icon sizes (icon-sm, icon-md) and any color.
Rounded
none, md, lg, full.
With icons & states
Buttons accept any children, and forward native props like disabled.
Button group
Segmented buttons via ButtonGroup. Source: src/components/ButtonGroup.tsx.
Leading & trailing icons
Icons sit inline with the label (baseStyles gap-2). Lead with an icon to reinforce the action, or trail one for direction, disclosure, or download — across any variant and color.
Split button
A primary action paired with a dropdown selector for related choices. Click the caret to open the menu. Composed from Button + the Dropdown primitives.