Actions

Interactive elements — buttons, badges, chips, and keyboard shortcuts.

Button

Primary interactive element. Supports all semantic colors, 6 variants, and 5 sizes.

<UButton color="primary" variant="solid" size="md" label="Button" />

Custom variants

Additional button colors defined via compound variants in app.config.ts. These sit outside Nuxt UI's standard palette.

Badge

Status labels and counters. Supports colors, variants, and icons.

BadgeWith icon42
<UBadge color="primary" variant="subtle" size="md" label="Badge" />

Chip

Indicator overlay attached to another element — for notifications or counts.

3
<UChip color="primary" size="md">
  <UButton color="neutral" variant="outline" size="sm" label="Notification" />
</UChip>

Kbd

Keyboard shortcut indicators.

⌘KorGDDesign System