Button
Seven styles × five sizes. btn-primary (gold) is the highest-emphasis CTA — reserved for the most important action on a page (Add to cart, Submit). btn-brand (blue) is the high-emphasis secondary. Outline, ghost, text, and danger fill out the rest.
btn-primary is gold, btn-brand is blue. This inverts the more common industry convention where primary = brand color. Preserved for prototype continuity.
Styles
Use one style per variant. Combine with size modifiers (next section).
btn-primary — highest-emphasis CTA
Gold accent. Reserved for the most important action on a page.
<button class="btn btn-primary">Add to cart</button>btn-brand — high-emphasis secondary
Brand blue solid. Use when primary is reserved or alongside a primary.
<button class="btn btn-brand">Save changes</button>btn-outline — secondary action
Brand-bordered, transparent fill. Lower emphasis than solid styles.
<button class="btn btn-outline">View details</button>btn-outline-light — over dark surfaces
Inverse outline. Sits comfortably over the deep brand surface (announcement bar, hero, footer).
<button class="btn btn-outline-light">Talk to a parts expert</button>btn-ghost — tertiary action
Soft border, text-only emphasis. Use for low-priority actions in dense UIs.
<button class="btn btn-ghost">Cancel</button>btn-text — inline action
No padding, link-like styling. For inline actions inside text or table rows.
<button class="btn btn-text">View all 47 alternatives</button>btn-danger — destructive action
Red. Reserve for irreversible actions (delete, remove, cancel order).
<button class="btn btn-danger">Cancel order</button>Sizes
Five sizes. md (default, no modifier) is 44px tall — meets the 44px touch-target minimum on mobile.
<button class="btn btn-brand btn-xs">Extra small</button>
<button class="btn btn-brand btn-sm">Small</button>
<button class="btn btn-brand">Default</button>
<button class="btn btn-brand btn-lg">Large</button>
<button class="btn btn-brand btn-xl">Extra large</button>Modifiers
Combine with any style + size.
btn-full — full width
Stretches to fill its container. Common on PDP CTAs and mobile.
<button class="btn btn-primary btn-full btn-lg">Add to cart</button>btn-icon — icon-only square
Width matches height. Use for toolbar icons, kebab menus, etc.
<button class="btn btn-ghost btn-icon" aria-label="Edit">
<svg width="16" height="16">...</svg>
</button>With leading icon
Icon adjacent to label. The base button has gap: spacing.2 for icon spacing.
<button class="btn btn-primary">
<svg width="16" height="16">...</svg>
Add to cart
</button>Disabled / busy state
Use the native disabled attribute. aria-busy="true" handles the in-flight state without disabling pointer events visually.
<button class="btn btn-primary" disabled>Add to cart</button>
<button class="btn btn-brand" aria-busy="true">Saving…</button>Just-added confirmation
Toggle .is-added for ~1.4s after a successful add-to-cart to flash the button green. Works on any .btn style and reverts to the underlying style on removal.
<button class="btn btn-brand is-added">✓ Added</button>Tokens consumed
Override any of these on a parent scope to retheme without touching component CSS.
| Slot | Style | Token |
|---|---|---|
| Background | Primary | --caster-button-primary-bg |
| Background hover | Primary | --caster-button-primary-bg-hover |
| Foreground | Primary | --caster-button-primary-fg |
| Background | Brand | --caster-button-brand-bg |
| Background | Outline | --caster-button-outline-bg |
| Border | Outline | --caster-button-outline-border |
| Border width | Outline | --caster-button-outline-border-width |
| Height (md) | All | --caster-button-size-md-height |
| Padding-x (md) | All | --caster-button-size-md-padding-x |
| Font size (md) | All | --caster-button-size-md-font-size |
| Font weight | All | --caster-button-font-weight |
| Border radius | All | --caster-button-radius |
| Transition | All | --caster-button-transition |