Badge Since v1.0.0

Overview

A badge provides a small numeric count on a pill for labels, filters, or lists. Set state when the count carries severity:

• neutral - Indicates generic information or a message with no severity.
• danger - Indicates a danger state, like an error that is blocking a user from completing a task.
• warning - Indicates a warning state, like a non-blocking error that might need to be fixed.
• caution - Indicates an action or notice which should immediately draw the attention
• info - Indicates helpful information or a message with very little to no severity.
• success - Indicates a success state, like if a process was completed without errors.

It must not take focus or act as a control; it has no implicit ARIA role. Provide context in surrounding text. Avoid color-only meaning (WCAG 1.4.1). Use threshold with number for values like 999+.

Also known as: Count, Pill