TanStack

Buttons

A polymorphic button (render as a link or any element via `as`). Composed from variant + color + size + rounded. Source: src/ui/Button.tsx.

Variants

primary, secondary, ghost, 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

The link variant reads as an inline text link — for low-emphasis actions and inline navigation. Takes any color and size.

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.