Badge

A badge marks an item with a status, a category or a count. Its label is one or two words, so users can scan it in a list.

UsageCopy Anchor Link

import { Badge } from "@biem/ui/components/ui/badge";

export function BadgeDefault() {
	return <Badge>New</Badge>;
}

ExamplesCopy Anchor Link

SecondaryCopy Anchor Link

Not every state needs to stand out, such as a promotion that has not started yet. With variant set to "secondary", the badge carries less emphasis than the default, so users notice the state without reading it as a call to act.

OutlineCopy Anchor Link

Beside their status, items carry properties that rarely change, such as the department a product belongs to. Set to "outline", variant keeps such a property in view without the weight of a status, so users tell a lasting attribute apart from a state that changes.

GhostCopy Anchor Link

Once an item has left the daily work, a mark still helps without asking for attention, as with a discontinued product that stays in a list for reference. A badge with variant set to "ghost" carries the least emphasis, so the information remains available to users who look for it and recedes for everyone else.

LinkCopy Anchor Link

In a table, a number often stands for a list that users want to open next, such as the open orders of a supplier. Through variant set to "link", the badge takes on the emphasis of a link and signals that more lies behind it. It only leads users there once render turns it into a real link.

InfoCopy Anchor Link

Many states are neither good nor bad and tell users where a process stands, such as a stock count that is still running. With variant set to "info", the badge presents such a state as neutral information, so users take note without searching for a problem.

SuccessCopy Anchor Link

A completed step deserves a clear confirmation, for example a transfer that the receiving store has booked in. Set to "success", variant marks the outcome as achieved, so users move on without checking it again.

WarningCopy Anchor Link

Some states call for action before they turn into a problem, such as products whose best-before date is approaching. Through variant set to "warning", the badge raises such a state above the routine, so users plan the next step while there is still time.

DestructiveCopy Anchor Link

When a process fails or stalls, the work around it often stops as well, for example after a payment was declined or a store rejected a delivery. Here, variant set to "destructive" flags that state as critical, so users see at once where they have to step in.

With IconCopy Anchor Link

Recurring states become faster to spot when a symbol accompanies them, for example in a column that users check every morning. An icon added to the badge provides that cue, while the label keeps the meaning on its own for users who do not know the symbol.

As LinkCopy Anchor Link

Sometimes a badge leads to the place where users deal with what it marks, such as the pending transfers of a store. Through render, the badge becomes a real link, so users can follow it with the pointer or the keyboard, open it in a new tab or share its address.

API ReferenceCopy Anchor Link