Button

Variants

Sizes

Split (dropdown)

For a primary action that's really a menu of equally-weighted choices (no single default), not a default-action-plus-alternatives split. <details class="btn-split">: the whole trigger (label + caret) opens the same menu, zero JS, same mechanism as the filter popover and accordion. The divider uses currentColor so it reads on any .btn variant, not just primary.

Disabled

Loading

Distinct from disabled (which dims to 50% opacity, signaling "unavailable"): loading keeps full color so the action still reads as "in progress." Apply the disabled attribute and .is-loading together during submission — disabled prevents double-submission, .is-loading swaps in the spinner and keeps full color.

Usage guidance

Primary: one per view/step, the single recommended next action (e.g. "Schedule sale"), carries a tinted shadow (--shadow-primary) for visual weight. Secondary: alternate or non-committal actions. Danger: consequential/destructive actions (refunds, deletions); per Design Principle 2, pair with a confirmation modal rather than firing immediately. Ghost: low-emphasis actions inside dense UI (table row actions, toolbar icons).