Badge

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

Keyboard interaction

Key	Action
`—`	No keyboard interaction. diwa-badge is a non-interactive display component.

Attribute / Property	Value / Behaviour
`role`	None by default. When the label prop is set, the inner element uses aria-label and role="status".
`label`	Use the label prop when the visible content is numeric or abbreviated and needs extra context.

Color + text — pair badge color with a visible text label so meaning is not conveyed by color alone.
Accessible counts — if the badge only shows a number, provide a descriptive label prop.