Badge

Badge signals status, category, or metadata in a compact, glanceable format, displaying short pieces of information with visual emphasis via color and size variants.

Use when no specific semantic meaning is required or the badge should be low‑attention.

Semantic colors convey meaning without requiring users to read the label.

Marks informational context or items that merit awareness.

Indicates success, completion, or a positive state.

Highlights caution or intermediate states that need attention but are not errors.

Signals failure or an error state. Use sparingly.

Accent colors add variety, useful for categorization or visual grouping.

A lively alternative to Success. Works for growth or environmental contexts.

Useful when many categories need visual differentiation.

Useful when many categories need visual differentiation.

Useful when many categories need visual differentiation.

Useful when many categories need visual differentiation.

Use size to reflect prominence and content density.

For tight spaces, lists, or when the badge supplements other content.

Default size balancing readability and space.

The current component renders a rounded rectangle.

Best for read‑only semantic indicators with no click interactivity.

Consider for interactive patterns like tags or table filters where clicking changes state.

Add an icon for extra context or quick recognition.

Icon-only badges are square at every size. Provide aria-label so the meaning is announced without visible text; the same value appears in a tooltip on hover.