USER INTERFACE · ACTIONS

Buttons

Variants, sizes, states and groups. Every button here does something.
THEME
DENSITY
01

Playground

Change the settings — compare with the default
COMPARE2 differences
DEFAULT
YOURS
Try clicking it
Settings
VARIANT
default: Primary
SIZE
default: M
SHAPE
default: Pill
ICON
default: No icon
DIFF FROM DEFAULT
+ iconLeft={…}+ count={3}
02

Variants

6 variants × 4 sizes
XS · 28S · 34M · 40L · 48PrimaryThe one main actionSecondaryEqual-weight alternativesOutlineSecondary on busy surfacesGhostToolbars, low emphasisDangerIrreversible actions onlyLinkNavigation inside text
03

States

Rest → hover → pressed → focus → disabled → loading
RESTHOVERPRESSEDFOCUSDISABLEDLOADINGPrimarySecondaryOutlineGhostDanger
Async saveidle → saving → saved → idle
Click to try
Width is locked while the label changes, so nothing jumps.
Hold to deletepress and hold 1.5 s
Release early to cancel. No confirmation dialog needed.
Keyboard focusTab to see the ring
The ring only appears for keyboard users (:focus-visible) — 2 px #9adbe6, offset 2.
04

Groups & compositions

How buttons combine
Segmentedone choice of 3–4
aria-pressed="true" on “Week”
Split buttonmain action + more
The choice is remembered — next time the main button does it.
More menu⋯ for rare actions
Spring 27 campaign
Toolbarfilter · export · primary
Secondary on the left, the one primary on the right.
Form footerCancel · Save
Destructive far left, primary far right, 8 px between.
Floating actionmobile · 56 px
375 px viewport
05

In Avava

Live — wizard, reminder, call, upload
Wizard footersticky · Back / Continue
STEP 1 OF 4Client → Scope
Invoice reminderloading → sent
KCAV-2026-040 · €9,84012 days overdue
Join callcountdown · disabled until 5 min before
Nordic Thread — campaign check-inStarts in 8 min · Join opens 5 min before
Uploadprogress inside the button
3.4 GB · Spring 27 / Selects
06

Rules & a11y

Hierarchy, targets, labels and contrast
One primary per view
✓ CLEAR
✕ COMPETING
Touch targets
34 px visible · 44 px hit areaPad small icon buttons with an invisible ring on touch screens.
Screen readers
<button aria-label="More actions">
aria-busy="true" · keep the label
disabled + title="No rows selected"
aria-pressed="true" in a toggle group
ContrastDark theme
16.8 : 1AAA
13.9 : 1AAA
15.2 : 1AAA
11.1 : 1AAA
6.9 : 1AAA
11.4 : 1AAA
Button
Does something: saves, sends, creates.Save, Send invoice, New project
Link
Goes somewhere: another page or section.View all, Read the brief
Icon button
A familiar action with no room for a word.More, Close, Edit — always with aria-label
DO✓One primary button per view, on the right✓Start labels with a verb: “Send invoice”✓Keep the width when the label changes to loading✓Show why a button is disabled✓Use Danger only for things that can’t be undone
DON’T✕Put two primary buttons next to each other✕Write “OK” or “Submit”✕Use a link style for an action that changes data✕Hide an icon button’s meaning — add aria-label✕Make touch targets smaller than 44 px