size

Badges come in four different sizes: small, medium, large, and extra-large. The small size is the default and most frequently used option. Use the other sizes sparingly to create a hierarchy of importance on a page.

fixed

Badges can be placed as floating in a container, or they can be fixed to any edge of a container. They lose their default corner rounding on the fixed edge.

style

A Badge's style determines its visual emphasis. Badges come in three different styles: bold, subtle, and outline.

• Bold: Provides the highest contrast and draws immediate attention for statuses that matter most.
• Subtle: Uses a light color tint for low visual emphasis, making it suitable for dense layouts like tables or lists.
• Outline: Uses a thin stroke with minimal fill for the lowest emphasis, ensuring legibility on complex or colored backgrounds.

Semantic variants

When badges have a semantic meaning, they use semantic colors. Use these variants for the following statuses:

• Accent: (e.g., new, beta, prototype, draft)
• Informative (e.g., active, in use, live, published)
• Neutral (e.g., archived, deleted, paused, not started, ended)
• Positive (e.g., approved, complete, success, purchased, licensed)
• Notice: (e.g., expiring soon, limited, deprecated )
• Negative (e.g., error, alert, rejected, failed)

Non-semantic variants

When badges are for color-coded categories, they use non-semantic colors. Non-semantic variants are ideally used for when there are 8 categories or less.

icon

A badge can have an optional icon. If no label is used, a badge becomes icon-only and it must include an icon. An icon-only badge is best for very small spaces, and it should always include a tooltip on hover to provide more context for the icon's meaning.

label

Badges should always have a label for accessibility and clear comprehension. When the label is not defined, a badge becomes icon-only.