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.

Loading...

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 on top

Placed next to

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.

Semantic color

Use color, especially semantic color, to show what to do next.

Size

Avoid mixing badge sizes in the same context.

Mixing badge sizes

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.

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.

Placed on top

Use words that describe a state or status.

Placed next to

Avoid labels that will truncate.