Badge

When to use

Use Badge to make the status of a record readable at a glance: the status of a task, a document or an application. It is used most in tables, lists and the header of a record’s detail page.

When not to use

• For an action: A Badge cannot be clicked. If people need to do something, use a Button.
• For a long message: Use a Banner or an InlineAlert for explanations longer than a sentence.
• For tagging or filters: Use a Tag for labels people add and remove.

Anatomy

Badge12

1. Containerbackground, border and fully rounded corners; 16 or 20 px tall, from `size`.
2. Labeltext that names the status in one or two words.

Behaviour

• Badge is static: it does not change on hover, click or focus, and it is not in the tab order.
• The text stays on one line; long text makes the Badge wider.
• A Badge fades in over 110 ms when it appears. When the status changes, give the Badge a new key; the new status takes its place with the same fade, and the old one never slides or shakes.

Count and dot

• count is for an unread count next to a navigation item or a tab; above max it shows 99+.
• dot marks something new without text. Its colour alone carries no meaning: give screen readers a label, and let the text around it carry the meaning on screen.

Guidelines

Let the text carry the status

People with colour blindness and screen reader users do not see the colour. The text of the Badge must tell the status without it.

Declined

DoThe text names the status; colour only supports it.

Status

Don'tOnly the colour carries the meaning; the text says nothing.

Pick the tone by meaning

Tone is for meaning, not decoration. A status looks the same everywhere in the product.

Pending

DoA pending record in the warning tone: something is still awaited.

Pending

Don'tThe brand tone draws attention but does not describe a status.

Use the bold variant sparingly

When every row of a table is bold, nothing stands out.

SuccessSuccessDanger

DoSubtle Badges in a list; the eye scans the rows easily.

SuccessSuccessDanger

Don'tBold on every row: the record with the problem gets lost.

Do not use a Badge as a Button

A Badge does not look clickable and cannot be reached with the keyboard. If an action is needed, show the status with a Badge and the action with a Button.

FailedTry again

DoThe status is in the Badge, the action in the Button.

Try again

Don'tAn action written on a Badge cannot be clicked.

Screen reader and contrast details are on the Accessibility tab.

Content

• Write one or two words, in sentence case: “Approved”, “In review”.
• Write the status as a past participle or an adjective (“Approved”, “Pending”); avoid the imperative.
• No punctuation, exclamation marks or abbreviations.
• Use the same word for the same status everywhere in the product.

English	Turkish	Tone
Approved	Onaylandı	success
Pending	Beklemede	warning
In review	İnceleniyor	info
Declined	Reddedildi	danger
Archived	Arşivlendi	neutral
Draft	Taslak	neutral

Platforms

• Desktop: In tables, the Badge sits left-aligned in the status column.
• Mobile: In a list item, it sits next to or under the title. When the row gets narrow, the text is not truncated; the Badge wraps to the next line.

Related components

• Button: If the status needs an action, put a Button next to the Badge.
• TextInput: The state of a form field (invalid, disabled) is shown by the field itself, not with a Badge.