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

Badge

Badge component voor status labels en categorieën

Badge

Badges tonen status, categorieën of counts. Compact en niet-interactief.

Varianten

Default

<span class="inline-flex items-center rounded-xs px-2 py-0.5
             text-caption font-medium
             bg-surface-secondary text-label-secondary">
  Default
</span>

Success

<span class="inline-flex items-center rounded-xs px-2 py-0.5
             text-caption font-medium
             bg-surface-success text-label-on-color">
  Active
</span>

Critical

<span class="inline-flex items-center rounded-xs px-2 py-0.5
             text-caption font-medium
             bg-surface-critical text-label-on-color">
  Error
</span>

Warning

<span class="inline-flex items-center rounded-xs px-2 py-0.5
             text-caption font-medium
             bg-surface-warning text-label-on-color">
  Warning
</span>

Brand

<span class="inline-flex items-center rounded-xs px-2 py-0.5
             text-caption font-medium
             bg-brand text-label-on-color">
  Featured
</span>

Token Mapping

PropertyToken
Border radius--radius-xs
Padding--space-2 x --space-1
Font size--text-caption-size
Font weight500

Accessibility

  • Badges zijn informatief, niet interactief — gebruik nooit als buttons
  • Kleur is nooit de enige indicator; combineer altijd met tekst

Previous

Card

Next

Input

On this page

BadgeVariantenDefaultSuccessCriticalWarningBrandToken MappingAccessibility