Badge Preview
A badge is a visual indicator that communicates a status or description of an associated component. They use short text, color, and icons for quick recognition and are placed near the relavant content.
Resources
Behavior
Badges don’t have a built-in max-width and will keep growing. If you need to add truncation, you have to add your own max-width and truncation styles.
Layout
Placement
Badges should be placed on or near the component they describe. They should be close enough that people can make intuitive connections between a badge and its associated component. For example, an online status badge can be placed on top of or offset on an avatar component.
Placed on top
Placed next to
Color
Use badge color intentionally within a layout to draw focus to the areas of highest importance. If you need to use warning and danger colors on a badge, give people a way to resolve the problem whenever possible.
Use color, especially semantic color, to show what to do next.
Size
Avoid mixing badge sizes in the same context.
Accessibility
Focus
By default, badges don’t receive focus. If you build interaction into a badge, like including a tooltip for more context, make sure to include focus.
Tooltips can help surface additional information without cluttering a layout.
Aria labeling
If a badge is only an icon, its information needs to be communicated with an aria label. If the badge is connected to another component, that component’s aria label should communicate the badge’s information.
Content
Badges with text should be short and descriptive. Aim for one or two words that describe a state. Don’t try to include too much.
Use sentence style capitalization—only capitalize the first letter of the first word. For more info, see Capitalization in the Microsoft Writing Style Guide.
Use words that describe a state or status.
Avoid labels that will truncate.