Counter

Counter shows a number with a status color. Use for notification counts, item quantities, step indicators, and anywhere you'd want "8" or "3" or "99+" with a hint of urgency or progress baked into the color.

Use it for

• Notification badges on icons and tabs
• Item quantities in cart/inbox/queue indicators
• Step counters in multi-step flows
• Any {n}-of-something indicator that benefits from a status color

For boolean status (no count, just "Active" / "Failed"), use Badge.

Import

import { Counter } from '@brikdesigns/bds';

Variants

Six status colors across four sizes.

Status colors

• success — Completed items, positive counts
• error — Error counts, alert counts
• warning — Pending items, attention needed
• progress — In-progress items
• brand — General counts, notification badges
• neutral — Inactive, disabled counts

Sizes

Max overflow

Use max to cap the displayed value. Anything over renders as {max}+.

When not to use

• Don't use Counter for boolean status. "Active" or "Failed" with no count is a Badge.
• Don't use Counter for non-integer values. It renders the value as-is; decimals and formatted values (currency, percentages) belong in regular text.

Accessibility

• Renders a <span> with the count as text content — read naturally by screen readers.
• For Counters used as notification badges on icons, pair with an aria-label on the parent button: <button aria-label="Inbox, 5 unread"><Inbox /><Counter count={5} /></button>.

API

Related

• Badge — non-numeric status sibling
• Dot — minimal status indicator
• Storybook playground