Roosevelt Docs
Roosevelt Docs
Welkom
Architecture
Workflows
Infrastructure
AI & Automation
API Reference
Design System
Design System

Foundations

Design TokensTypographyColorsSpacingMotion

Components

ComponentsButtonCardBadgeInputNavigation

Patterns

LayoutFormsFeedback

Guidelines

AccessibilityDark ModeFigma Handoff
Guides
Design System

Button

Button varianten, states en token mapping

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

SizePaddingFontGebruik
Smallpx-3 py-1.5text-captionInline acties, tabellen
Defaultpx-4 py-2text-bodyStandaard
Largepx-6 py-3text-subtitleHero CTAs, formulieren

Token Mapping

PropertyToken
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.

Previous

Components

Next

Card

On this page

ButtonVariantenPrimarySecondaryGhostSizesToken MappingAccessibility