Skip to content
EspañolEnglish
All components (204)

Badge

Status · Badge

What it is and when to use it

A badge on top of something else: the counter on a bell, the green "online" dot, the number on the cart.

When to use it

  • When the data goes ON TOP of another element, in a corner.
  • dot for "there is something new" without saying how much.
  • count for the figure: with 0 nothing is drawn, except with showZero, and past max (99 by default) it shows "99+". tone (error by default) and placement choose the color and the corner.

When not to

  • For a label that stands ALONE in the line of text (a status, a category), Tag.
  • For a number that is the content and not an adornment of something else, Stat.

Keyboard: it does not take part. What is focusable is whatever it sits on.

Accessibility: what is read is label, the whole sentence ("3 unread messages"), not the figure: the bubble is marked as decorative. A bare "3" says nothing, and the bubble may also have been clipped to "99+". Watch out for the wrapper: the bubble sticks out of the box, so an ancestor with overflow: hidden clips it — it is the first thing to check if it does not show.

Fine-tuning: --amset-badge-background, --amset-badge-color and --amset-badge-ring.

What it looks like

3 unread messages134 pending ordersOnline

<Badge count={3} label="3 unread messages" tone="error">
  <IconButton aria-label="Messages"><BellIcon /></IconButton>
</Badge>
<Badge count={134} max={99} label="134 pending orders" tone="warning">
  <Button variant="outline">Orders</Button>
</Badge>
<Badge dot label="Online" tone="success" placement="bottom-end">
  <Avatar name="Ada Lovelace" />
</Badge>

Props

Import it with import { Badge } from '@amset/ui'. Required props are marked.

PropTypeWhat it does
childrenrequiredReactNodeWhat the badge carries on top: an icon, an avatar, a button.
labelrequiredstringThe whole sentence that is read: "3 unread messages". Required, because a bare "3" says nothing, and the number is marked as decorative so it is not read twice.
classNamestringMerged with the library classes; it does not replace them.
countnumberThe number. With `0` nothing is drawn, unless `showZero` is set.
dotbooleanJust a dot, with no figure. For "there is something new" without saying how much.
maxnumberFrom how many it shows "+". By default, 99.
placement"bottom-end" | "bottom-start" | "top-end" | "top-start"—
showZeroboolean—
tone"neutral" | "accent" | "secondary" | "tertiary" | "info" | "success" | "warning" | "error"—

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: