Data Display
Notification badge with count, dot, and placement, plus a bump animation on change.
15 props across 5 groups
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Element the badge is anchored to. |
content | string | number | ReactNode | — | Badge content; omit with isDot for a plain dot. |
max | number | — | Caps a numeric content at max+ (e.g. "99+"). |
children
ReactNode
Default: —
Element the badge is anchored to.
content
string | number | ReactNode
Default: —
Badge content; omit with isDot for a plain dot.
max
number
Default: —
Caps a numeric content at max+ (e.g. "99+").
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "solid" | "soft" | "bordered" | solid | Visual style variant. |
shadow | "none" | "xs" | "xs-sm" | "sm" | "md" | "lg" | none | Box-shadow depth. |
color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | default | Semantic color. |
size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | md | Badge size. |
shape | "circle" | "rectangle" | rectangle | Badge shape. |
isOneChar | boolean | false | Forces a perfectly circular badge sized for one character. |
variant
"solid" | "soft" | "bordered"
Default: solid
Visual style variant.
shadow
"none" | "xs" | "xs-sm" | "sm" | "md" | "lg"
Default: none
Box-shadow depth.
color
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Default: default
Semantic color.
size
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Default: md
Badge size.
shape
"circle" | "rectangle"
Default: rectangle
Badge shape.
isOneChar
boolean
Default: false
Forces a perfectly circular badge sized for one character.
| Prop | Type | Default | Description |
|---|---|---|---|
placement | "top-start" | "top-end" | "bottom-start" | "bottom-end" | ... | "top-end" | Corner the badge anchors to, relative to children. |
offset | number | 0 | Extra offset along the placement's main axis. |
crossOffset | number | 0 | Extra offset along the placement's cross axis. |
placement
"top-start" | "top-end" | "bottom-start" | "bottom-end" | ...
Default: "top-end"
Corner the badge anchors to, relative to children.
offset
number
Default: 0
Extra offset along the placement's main axis.
crossOffset
number
Default: 0
Extra offset along the placement's cross axis.
| Prop | Type | Default | Description |
|---|---|---|---|
showOutline | boolean | true | Shows a ring around the badge separating it from its content. |
disableOutline | boolean | false | Alias to force-disable the outline. |
isInvisible | boolean | false | Hides the badge without unmounting it. |
isDot | boolean | false | Renders a plain status dot instead of content. |
ariaLabel | string | — | Accessible label for the badge indicator. |
showOutline
boolean
Default: true
Shows a ring around the badge separating it from its content.
disableOutline
boolean
Default: false
Alias to force-disable the outline.
isInvisible
boolean
Default: false
Hides the badge without unmounting it.
isDot
boolean
Default: false
Renders a plain status dot instead of content.
ariaLabel
string
Default: —
Accessible label for the badge indicator.
| Prop | Type | Default | Description |
|---|---|---|---|
disableAnimation | boolean | false | Disables the bump animation on content change. |
disableAnimation
boolean
Default: false
Disables the bump animation on content change.
| Prop | Type | Default | Description |
|---|---|---|---|
classNames | Partial<Record<"base" | "badge", string>> | — | Per-slot class overrides. |
className | string | — | Class applied to the root element. |
style | CSSProperties | — | Inline styles for the root element. |
classNames
Partial<Record<"base" | "badge", string>>
Default: —
Per-slot class overrides.
className
string
Default: —
Class applied to the root element.
style
CSSProperties
Default: —
Inline styles for the root element.
