Badge
badgeOverlays a count, capped count, custom value, or dot on wrapped content.
Usage
Package Count
When wrapping child elements, the sub-element overlaps to the upper right corner and displays 99+ when exceeding max.
<>
<Badge count={5}>
<Icon />
</Badge>
<Badge count={1000} max={99}>
<Icon />
</Badge>
</>Pure point
dot only displays small dots and does not display numbers (commonly used for "unread" prompts).
<Badge dot tone="danger">
<Icon />
</Badge>Tone color
tone provides danger (default) / brand / success / warning / neutral.
<>
<Badge count={3} tone="danger" />
<Badge count={3} tone="brand" />
<Badge count={3} tone="success" />
<Badge count={3} tone="warning" />
</>Avatar online status
placement nails the corner mark to the specified corner; content puts custom content (such as green check) in the slot.
<>
<Badge dot tone="success" placement="bottom-right">
<Avatar fallback="Hu" />
</Badge>
<Badge tone="success" placement="bottom-right" content={<Check className="size-2.5" />}>
<Avatar fallback="EM" />
</Badge>
</>When to use
Use Badge to overlay unread counts, presence dots, or verification marks on icons and avatars. It represents a quantity or binary presence. Use Chip for removable category or status labels, or Dot for an independent semantic status point.
Import
import { Badge } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| count | number | — | Numeric count; zero is hidden unless showZero is true. |
| max | number | 99 | Values above this limit render as max+. |
| dot | boolean | false | Renders only a dot and takes precedence over count. |
| showZero | boolean | false | Keeps a zero count visible. |
| invisible | boolean | — | Hides the badge while retaining its wrapped child. |
| tone | "neutral"|"brand"|"success"|"warning"|"danger" | danger | Semantic color. |
| size | "sm"|"md" | md | Badge size. |
| placement | "top-right"|"top-left"|"bottom-right"|"bottom-left" | top-right | Overlay corner when children is supplied. |
| offset | [number, number] | — | [x, y] pixel adjustment, where positive values move right and down. |
Slots
| Slot | Type | Description |
|---|---|---|
| content | ReactNode | Custom badge content, such as an icon; takes precedence over count and dot. |
| children | ReactNode | Host element for an overlaid badge; omit it to render the badge independently. |
Pitfalls
Precedence is content over dot over count. A zero count hides the badge unless showZero is explicit. Circular hosts often need a small outward offset to place the badge precisely on their edge.
Related
Sparkline · ImageViewer · LiveProductCard · DiffStat · ScoreRing · Dot
Playground
<Badge count={5} max={99} tone="danger" placement="top-right">
<Icon />
</Badge>