Badge / Pill

Badges (or Pills) are used to convey dynamic information such as counts, status, or other secondary data. They can include labels, icons, or numbers and are typically used alongside text to enhance user understanding of key information.

Usage

Badges are ideal for:

Displaying status indicators – Show the status of a task, user, or item.
Count notifications – Display the number of unread messages, tasks, or notifications.
Supplementing labels – Add extra context to an item without overwhelming the layout.

Default

A simple badge displaying only text, often used for status or count notifications. Add an icon to the badge for extra context or visual emphasis. Icons can help clarify the message.

Default Default + icon

<span class="pill">...</span>

Size: Small

Small badges are compact, often used next to text or within tight spaces, like notification counters or inline indicators.

Default Default + icon

<span class="pill pill--sm">...</span>

Size: Large

Large badges are more prominent and used for primary status indicators. Ideal for profile views, task boards, or sidebars.

Default Default + icon

<span class="pill pill--lg">...</span>

Default: Solid

The solid badge design is the standard look, with a filled background. Ideal for general use.

Default: Solid

<span class="pill pill--default-solid">...</span>

Ghost

The ghost badge has a transparent background with only the border and text visible. It’s subtle and used when minimal emphasis is required.

Ghost

<span class="pill pill--ghost">...</span>

Info: Solid

The info badge style is used to indicate neutral, informational status, typically showing background details that don’t require immediate action.

Info Info: Solid

<span class="pill pill--info">...</span>
<span class="pill pill--info-solid">...</span>

Negative: Solid

The negative badge design indicates negative statuses such as errors or issues. It is used to alert users to important problems.

Negative Negative: Solid

<span class="pill pill--negative">...</span>
<span class="pill pill--negative-solid">...</span>

Positive: Solid

The positive badge is used to indicate success or favorable outcomes, such as completion, approval, or success.

Positive Positive: Solid

<span class="pill pill--positive">...</span>
<span class="pill pill--positive-solid">...</span>

Warning: Solid

The warning badge indicates potential issues or conditions requiring attention but not necessarily errors. Often used for precautionary messages.

Warning Warning: Solid

<span class="pill pill--warning">...</span>
<span class="pill pill--warning-solid">...</span>