Button

Buttons triggeren acties. Drie varianten: Primary, Secondary en Ghost.

Varianten

Primary

<button class="inline-flex items-center justify-center rounded-s
               bg-brand px-4 py-2 text-body font-medium text-label-on-color
               transition-colors duration-150
               hover:opacity-90 active:opacity-80
               disabled:cursor-not-allowed disabled:opacity-50">
  Primary Action
</button>

Secondary

<button class="inline-flex items-center justify-center rounded-s
               border border-outline-strong bg-surface-primary px-4 py-2
               text-body font-medium text-label-primary
               transition-colors duration-150
               hover:bg-surface-secondary active:bg-surface-accent
               disabled:cursor-not-allowed disabled:opacity-50">
  Secondary Action
</button>

Ghost

<button class="inline-flex items-center justify-center rounded-s
               px-4 py-2 text-body font-medium text-label-secondary
               transition-colors duration-150
               hover:bg-surface-secondary hover:text-label-primary
               active:bg-surface-accent
               disabled:cursor-not-allowed disabled:opacity-50">
  Ghost Action
</button>

Sizes

Size	Padding	Font	Gebruik
Small	`px-3 py-1.5`	`text-caption`	Inline acties, tabellen
Default	`px-4 py-2`	`text-body`	Standaard
Large	`px-6 py-3`	`text-subtitle`	Hero CTAs, formulieren

Token Mapping

Property	Token
Background (primary)	`--color-brand`
Text (primary)	`--color-label-on-color`
Border (secondary)	`--color-outline-strong`
Border radius	`--radius-s`
Transition	`--transition-fast`

Accessibility

Altijd een duidelijk label (tekst of aria-label)
Focus ring via focus-visible:ring-2 focus-visible:ring-outline-active
disabled state vermindert opacity tot 50%
Minimaal touch target: 44x44px

⚠

Icon-only buttons

Buttons met alleen een icon MOETEN een aria-label hebben. Gebruik sr-only voor screen reader tekst als alternatief.

Button

On this page