Components
Buttons
The primary way users take action. One primary button per view — everything else competes for attention it shouldn't have.
Stablews-btn
Variants
Use exactly one primary button per screen or form. Secondary and tertiary can appear multiple times.
<button class="ws-btn ws-btn--primary">Primary</button>
<button class="ws-btn ws-btn--secondary">Secondary</button>
<button class="ws-btn ws-btn--tertiary">Tertiary</button>
<button class="ws-btn ws-btn--danger">Danger</button>
<button class="ws-btn ws-btn--accent">Accent</button>| Variant | Use for |
|---|---|
| Primary | The single most important action (Submit, Save, Continue) |
| Secondary | Alternative actions alongside primary (Cancel, Back) |
| Tertiary | Low-emphasis actions, often inline (View details) |
| Danger | Destructive actions (Delete policy, Remove user) |
| Accent | Rare celebratory / promotional moments only |
Sizes
<button class="ws-btn ws-btn--primary ws-btn--sm">Small</button>
<button class="ws-btn ws-btn--primary">Medium</button>
<button class="ws-btn ws-btn--primary ws-btn--lg">Large</button>With icons
<button class="ws-btn ws-btn--primary">
<svg>...</svg> New quote
</button>
<button class="ws-btn ws-btn--secondary ws-btn--icon" aria-label="Refresh">
<svg>...</svg>
</button>States
<button class="ws-btn ws-btn--primary">Default</button>
<button class="ws-btn ws-btn--primary" disabled>Disabled</button>
<button class="ws-btn ws-btn--primary ws-btn--loading">Loading</button>Hover and focus states are built into ws-btn automatically — try hovering / tabbing to the buttons above.
Usage
One primary action, clearly labeled with a verb
Don't use two primary buttons side by side