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.

One button, a menu of choices

MenuButton: the caret sits inside the button, entries carry tinted icons, links and reasons

Ranked row actions

RowActions primary: one labelled action per row, the rest icon circles

Duplicate part number

Missing fitment year

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

disabledReason looks disabled but stays hoverable, so the reason shows as the tooltip

Every color, every variant

Filled buttons read white on every color; the default is text neutral, solid is the one primary

text

solid

outline

ghost

Size scale

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

Named presets

The nine common actions and three shapes; every default button carries an icon, so pick a preset or an icon

Async click owns its own spinner

A Promise-returning onClick shows pending by default, no flag needed

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