StatusBadge
A short label for a record's state, such as Paid or Overdue, in a tone that repeats what it says.
import { StatusBadge } from "@butteryui/react";Demo
When to use it
Use it for
- A record's state in a table or list: Paid, Refunded, Overdue
- A metric's change, with an arrow icon, in success or danger
- A small tag such as Tip or New, in info
- The one state in a list that has to stand out, such as Overdue, with variant="solid"
- A dense table where filled badges would be loud, with variant="outline"
Not for
- A live value beside a control: use ValueBadge
- A removable filter or choice: use Chip or FilterPill
- A message about the page: use Callout or Banner
Examples
Badge looks
The three looks of a tone: soft in a table cell, solid where a state has to stand out, outline in a quiet row.
Metric change
A metric's change against the last period, with an arrow before it.
$18,240
12.4%Order list
Orders in a list, each with its state; shipping one turns its badge from Roasting to Shipped.
Order states
An order's state in a table cell: the word says it, the tone repeats it.
Variants and states
Tones
Neutral, info, success, warning and danger, each on its own subtle background.
Soft, solid and outline
Soft, the default, sits on the tone's subtle background; solid fills with the tone's strong color for a state that has to stand out; outline draws a 1px edge around the tone's words for a quieter row. All three keep one size.
With an icon
A 12px icon before the label.
Props
StatusBadge
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "neutral" | "info" | "success" | "warning" | "danger" | "neutral" | "neutral" (the default), "info", "success", "warning" or "danger". |
variant | "soft" | "solid" | "outline" | "soft" | "soft" (the default) on the tone's subtle background, "solid" filled with the tone's strong color for a
state that has to stand out, or "outline", a 1px edge around the tone's text, for a quieter row. |
icon | ComponentType<IconComponentProps> | A 12px icon before the label, such as an arrow for a change. |
It also takes ComponentPropsWithRef<"span">.
Accessibility
Plain text: the label says the state, so it reads the same to screen readers and without color. Its icon is decorative.
It takes no keyboard input of its own.
Motion
It doesn't move.
With reduced motion: Nothing changes.
Layout
It's --bt-h-badge (20px) tall and as wide as its label, its padding and its 12px icon, in every variant: the outline's edge is drawn inside it. It's never wider than its container, where a long label truncates with an ellipsis and shows in full as its title, and it takes no input, so it has no hit area.
Related
See it in the roastery demo's customers, orders, payouts and subscriptions. See it in the Halfmoon shop demo.