Badge

A small count or status dot pinned to the corner of whatever it wraps, for things that need noticing without being read.

Basic

Set count for a number, dot for a plain dot, or showZero to keep a 0, and pass the badge to an avatar's indicator to put it on its corner.

Size

Set size="small" for a smaller count that suits dense rows, on an avatar or on its own.

Shape

Set shape to "square" or "squircle" to change the count's corners from the default circle or pill.

Elevated

Set elevated={false} to drop the ring and shadow around the count, so it sits flat on what it overlaps.

Offset

Set offset to an [x, y] pair to move the count away from the corner, outward or inward.

Custom count

Pass count a node or a short string instead of a number, like a status icon or "NEW".

Count tooltip

Set title to replace the count's hover tooltip with a sentence, like 17 unread messages.

Status

Set status and text for a colored dot with a label, like Deployed or Down, and processing pulses.

Processing colors

Add color to status="processing" to recolor the dot and its pulsing ring, with a color name like green or rose.

Pulse

Set pulse to "fade" to dim the dot and bring it back instead of sending out a ring, or to false to keep it still.

Fade on any dot

pulse="fade" works on every status and color, from the gray default dot to a red Recording or a violet Generating one.

Preset colors

Set color to a preset like cyan or magenta to recolor a dot with a label, a count, or a count on an avatar.

Theme palettes

color also takes the palettes your theme declares, like emerald and violet, or the gray slate.

Emphasis

Set emphasis="strong" to color the label in its dot's color, a shade darker so it stays readable, so the state also reads from the text.

Standalone

A Badge with no children shows its count inline, for a number beside a label or in a list row.

Dynamic

Change count or dot at runtime and the badge animates, with the number scrolling to its new value.

Clickable

Wrap a link or a button in Badge and the whole control stays clickable, with the count on its corner.

Ribbon

Ribbon hangs a label over a card's corner, like a Beta flag, and emphasis="subtle" gives it a lighter tint.

classNames and styles

Pass classNames an object or a function to style the root or indicator, like a count that turns amber past 20.

In context

The component inside real screens, with the components it usually sits beside.

Notification bell

A header bell with an unread count that goes down as you mark notifications read, and disappears at zero.

Service health

A service health card where each row ends in a status dot with a colored label, from Operational to Outage.

Team presence

A team list with a status dot on each avatar for online, away and offline, next to the name.

Counts in tabs

Small counts inside tab labels, where a tab with a count of 0 shows no badge at all.
A sidebar where each item ends in a small count, red on the active item and gray on the rest.

Pricing ribbon

A pricing card with a Best seller ribbon over its corner, above the plan's features and an upgrade button.

API Reference

Badge
Badge's props. Rows marked antuikit in the Version column are added by the kit.
Ribbon
Ribbon's props. Rows marked antuikit in the Version column are added by the kit.