Component
Badge
A small counter or dot that overlays the corner of whatever it wraps, used to flag unread items or unread counts. Counts above the configured maximum collapse to a '+' suffix.
The primitive
3
99+
badge.tsx
<NativeBadge count={3} variant="red">
<Bell size={24} />
</NativeBadge>Example
Sits on the corner of the notifications tab icon, incrementing with each unread item and collapsing to a '+' once the count passes its ceiling.
HomeSettings
5
badge-example.tsx
<NativeBadge count={5} variant="red">
<Bell size={22} />
</NativeBadge>Capabilities
| Prop | Type | Description |
|---|---|---|
| count | number | — |
| dot | boolean | When true, shows a simple dot with no count |
| variant | "red" | "blue" | "gray" | — |
| max | number | Maximum count shown before showing "99+" |
| className | string | — |
| childrenrequired | React.ReactNode | — |