Display / Count & StatusDot
Count & StatusDot
Round count stickers and little status dots.
Server ComponentWCAG AASince v0.1
312OnlineOn a callOffline
import { Count, StatusDot } from "@plop-ui/react";
<Count label="3 unread">3</Count>
<StatusDot tone="busy">On a call</StatusDot>Change every prop live in the playground.
Props
Count
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | string | number | — | — |
| label required | string | — | What the number means, read by screen readers: "3 unread". Required, because a bare number says nothing. |
| className | string | none | — |
| size | "sm" | "md" | md | `sm` fits inside tabs and buttons. |
| tone | "ink" | "tomato" | tomato | Fill: `tomato` for attention, `ink` for plain counts. |
StatusDot
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | ReactNode | — | The words are the status; the dot only repeats it. |
| className | string | none | — |
| tone | "online" | "busy" | "offline" | none | — |
Use it well
DoSay what the number counts in the label: "3 unread".
Don'tShow a dot without its words.
Accessibility
- A Count needs a label; a bare number says nothing.
- A StatusDot always has its words next to it.