Button
Accessible, loading-aware button with built-in spinner. Fully themeable via CSS custom properties — no colour opinions baked in.
Keyboard: native <button> — Tab, Enter, Space. Sets aria-busy during loading. (clicked) output is suppressed when disabled or loading.
Variants
Primary
Use for primary CTAs — form submits, confirmations, main actions.
Secondary
De-emphasised action — pairs with a primary button for secondary flows.
Outline
Lightweight bordered style for tertiary or cancel-type actions.
States
Disabled
Visually muted + pointer disabled. The (clicked) output is automatically suppressed.
Disabled Outline
Outline variant, visually muted + non-interactive.
Loading — Primary
Click to simulate async work. The built-in spinner and interaction blocking kick in automatically.
Loading — Secondary
Secondary variant with loading state.
Loading — Outline
Outline variant with loading state.
Custom Loading Icon
Custom Icon Template
Pass a #template reference via [loadingTemplate] to replace the default spinner with your own icon.
Composition
Leading Icon
Icon placed before the label.
Trailing Icon
Icon placed after the label.
Full Width
Stretches to fill its container.
Theming
Custom Token
Override colours via CSS custom properties.