Button

Every button the apps ship: five variants, named presets, async pending state, badges, split dropdowns, and link rendering.

Job header actions

The B17 toolbar shape: quiet text-shade actions beside the page title

Job #9421

AC Delco Q3 · Part Type Matching

Card toolbar actions

A card-scoped action or link sits in the card's own toolbar slot, and this card carries one too

Card

Outputs

What this run wrote, part by part

Open run

Three parts written, none failed.

Table row actions

Icon-only ghost buttons with tooltips, one destructive, toasts on every click

18in Alloy Wheel, Chrome

SPD-4471-WHL

Disc Brake Conversion Kit

SPD-2290-BRK

Form footer

Primary solid submit driving promisify's pending state, text cancel beside it

Export a loadsheet

A realistic split button: the default action runs now, the caret offers formats

Buttons that are actually links

href plus linkAs renders a real anchor through the app's own router link

New workspace

View this page's source

Blocked, with a reason

bricked looks disabled but stays clickable, so the paired tooltip can explain why

Every color, every variant

Filled buttons read white on every color; neutral is the dark-slate CTA default

solid

outline

ghost

link

text

Size scale

xs through xl, from a dense table row to a primary page CTA

Named presets

Bundled icon and content, some also color or variant; explicit props still win

Async click owns its own spinner

promisify drives pending state straight off a Promise-returning onClick

Acknowledge without extra state

IconOnClick swaps to a checkmark for a second after the click

Split button

A caret-opened panel beside the main action, via dropdown

Corner badges

indicator-item counts and flags, all four corners

Loading, skeleton, and disabled

Three ways a button says not yet

Disabled across variants

Native disabled works everywhere; bricked keeps the tooltip alive

Shade

A soft tint at rest on the quiet variants, deepens on hover

Circle, dashed, and badge sizing

Icon-only circles, add-affordance dashes, and resized badges

Styling slots

Every className the component exposes, and what it reaches

className: the button itself
_className: the outer wrapper, Tooltip's own trigger div
iconClassName: the leading or only icon
badgeClassName: the corner badge