Actions
Buttons, links and toolbars — the pieces people press. Every action component ships with hover, pressed, focus, loading and disabled states, honours the 44px touch target on mobile sizes, and re-tints from a single accent token.
Button
The workhorse. Default is a neutral filled button; add
.b-btn--primary for the main action of a view — aim for
one primary per view, like Apple does.
Sizes
States
<button>.
The loading state keeps the label in the DOM (visually hidden) so the
accessible name never disappears; pair it with
aria-busy="true". Disabled buttons keep 4.5:1 contrast
on their label at 40% opacity over surface colors.Icon Button
Square variant for icon-only actions. Always provide
aria-label; add .b-tooltip-host with
data-tooltip for a hover hint.
Floating Action Button
.b-fab pins to the bottom-trailing corner with safe-area
padding and an accent glow. Shown here inline with
position: static for the demo.
Button Group
Related actions fused into one control. Use
.b-btn-group--attached for a hairline between segments.
Split Button
Primary action plus a chevron that opens related choices.
Merge branch
Toggle Button
A button with on/off state. Reflect state with
aria-pressed; the accent tint appears automatically.
Link
Inline navigation. Plain <a> elements are accent
colored by default; .b-link adds icon alignment and
muted/danger variants.
Link Group
A wrapping row of related links, optionally dot-separated.
Toolbar
Compact strip of small controls with hairline dividers. Add
.b-toolbar--glass when it floats above content.