Diwa Design System

Badge

Compact pill-shaped labels for status, counts, and metadata. Use Badge for small semantic indicators that should stay visually lightweight.

diwa-badge — Properties

NameTypeDefaultDescription
variant'neutral' | 'accent' | 'success' | 'warning' | 'danger''neutral'Semantic color variant used for status or metadata.
size'sm' | 'md''md'Size tier controlling padding and font size.
labelstringAccessible label used when the visible content alone is not descriptive enough.
theme'dark' | 'light''dark'Per-component theme override.

Events

diwa-badge is a display-only component and emits no events.

Slots

SlotDescription
defaultBadge label content.