Skip to content

Badge

A state or a count, named in words.

Playground

Installation

Default

Intent and emphasis

An intent at subtle (the default); solid when it needs action, outline in dense lists.

Status

One intent per state.

Data color

A color the workspace picked (a label, a category) is data, not an intent: pass it as color instead of intent. Every emphasis paints from it, in both modes.

Categories

Without a picked color, take the categories in order.

Sizes

24px; sm (20px) for a count in a dense row.

Shapes

Rounded for a state; pill for a count or a filter chip.

With icon

With count