Feedback & indicators
Badge
Use badges to highlight an item's status for quick recognition.
import { Badge, IndicatorDot, NotificationBadge } from '@balance-web/badge';Loading demo…
Badge
Loading demo…
tone
Use the tone property to indicate the intent of the badge.
Loading demo…
size
size accepts "xsmall", "small" or "medium" (the default).
Loading demo…
weight
Loading demo…
Tones and weights
Loading demo…
NotificationBadge
Loading demo…
tone
Use the tone property to indicate the intent behind a given value.
Loading demo…
max
Loading demo…
IndicatorDot
Loading demo…
label
When the intent isn't provided by text, you must supply an "aria-label" for assistive tech users.
Loading demo…
size
size accepts "xsmall", "small" or "medium" (the default) — "xsmall" renders a 6px dot,
"small"/"medium" both render an 8px dot.
Loading demo…