Badge
Compact numeric and dot indicators for counts, unread state, and notifications.
Badge is intentionally limited to compact numeric, short-count, and dot indicators. Use Tag for readable statuses, categories, filters, links, avatars, and removable values. Use BadgeIndicator when the badge must float over another element.
Counts
import { Badge } from '@mosmox/ui';
<Badge tone="danger" count={7} />
<Badge tone="danger" count={120} max={99} />
<Badge tone="primary" count={0} showZero />
<Badge tone="neutral" count="new" aria-label="New item" />When count is numeric and greater than max, the output is max+. By default, count=0 is hidden; set showZero to display it.
Dot indicators
Use dot for online, unread, or other presence states that do not need text.
<Badge tone="success" dot aria-label="Online" />
<Badge tone="warning" variant="solid" dot aria-label="Needs attention" />
<Badge tone="danger" variant="solid" dot aria-label="Offline" />For a readable status such as “Pending review”, use a Tag instead:
<Tag tone="warning">Pending review</Tag>Presentation
tone supports neutral, primary, secondary, success, warning, and danger. variant supports solid, soft, outline, and light. size supports xs, sm, default, and lg; shape supports rounded, pill, and square.
<Badge size="xs" shape="rounded" count={1} />
<Badge size="sm" shape="pill" count={8} />
<Badge size="default" variant="solid" count={24} />
<Badge size="lg" shape="square" count={120} max={99} />An optional icon can accompany a count or dot. loading, disabled, onClick, and removable remain available for application-specific indicator interactions, but the component never renders arbitrary text content. Use Tag when the content is a human-readable label.
Badge over another component
import { BadgeIndicator } from '@mosmox/ui';
<BadgeIndicator count={3} tone="danger">
<Button variant="outline">Inbox</Button>
</BadgeIndicator>
<BadgeIndicator dot tone="success" pulse>
<Avatar initials="AJ" name="Alex Johnson" />
</BadgeIndicator>BadgeIndicator forwards Badge presentation and count props and positions the generated indicator in a corner. For a custom readable label, pass a Tag through its badge prop:
<BadgeIndicator badge={<Tag tone="primary" size="xs">New</Tag>}>
<Button variant="outline">Updates</Button>
</BadgeIndicator>API Reference
| Property | Type | Default | Description |
|---|---|---|---|
| count | number \ | string | — |
| max | number | — | Numeric overflow threshold rendered as max+. |
| showZero | boolean | false | Shows count=0. |
| dot | boolean | false | Renders a current-color dot indicator. |
| icon | ReactNode | — | Decorative icon alongside a count or dot. |
| tone | BadgeTone | neutral | Semantic color family. |
| variant | BadgeVariant | soft | Surface treatment. |
| size | BadgeSize | default | Indicator density. |
| shape | BadgeShape | pill | Corner treatment. |
| onClick | (event) => void | — | Optional interactive behavior. |
| removable | boolean | false | Shows a remove control for an interactive indicator. |
| onRemove | (event) => void | — | Called by the remove control. |
| loading | boolean | false | Shows a loading state and disables interaction. |
| disabled | boolean | false | Disables interaction and removal. |
| aria-label | string | — | Accessible name, especially important for dot-only badges. |
| className | string | — | Additional component class. |
Choosing the right component
| Need | Component |
|---|---|
| Numeric count, unread count, 99+, or dot | Badge |
| Count positioned over a button/avatar | BadgeIndicator |
| Status text, category, filter, link, avatar, selectable or removable value | Tag |