Badge

import { Badge } from "@hel/ui/badge"
import { Flex } from "@hel/ui/flex"

When to use it#

Use a badge to tag something with a short word: the status of an invoice, the plan of a customer, a "New" next to a feature, a number of unread messages. It is read at a glance, so keep the text to one or two words.

A badge is not interactive. For something people can press, use a Button. For a message that needs a sentence, use an Alert.

Import#

Copyimport { Badge } from "@hel/ui/badge"

Usage#

Copy<Badge variant="success">Paid</Badge>

Badge is a plain span, so it takes every attribute of one.

Examples#

Variants#

The variant carries the meaning, so pick it by what the badge says rather than by what looks good. success, warning and destructive are for states that have a good, a so-so or a bad side. default, secondary, outline and ghost are neutral, and go from the loudest to the quietest.

Do not rely on color alone. The words should say the same thing, because some people cannot tell the colors apart.

Sizes#

size is sm or md, and the default is sm. The small one suits tables and lists. The medium one stands on its own better, such as in a page header.

import { Badge } from "@hel/ui/badge"
import { Flex } from "@hel/ui/flex"

Status in a list#

Badges work best when they sit in the same place in every row, so the eye can run down the column. Here the text carries the state, and the color backs it up.

import { Badge } from "@hel/ui/badge"
import type { BadgeProps } from "@hel/ui/badge"
import { Flex } from "@hel/ui/flex"

Props#

Badge#