Component
Badge
A small counter or dot that overlays the corner of whatever it wraps, used to flag unread items or counts. Counts above the configured maximum collapse to {max}+ (default 99+).
Standalone
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 99+ 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 | - |