Components
Badge
Small badge indicator for notifications, counts, or status dots. Attaches to any child element.
import{ Badge }from"oks-ui"
Count badgeDot indicator12 placementsMax overflow3 variants
Dot Badge
Status indicator dots with placement control.
Interactive Playground
Controls
Preview
3
Generated Code
<Button>Button</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| content | string | number | ReactNode | — | Badge content (count or text). |
| color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | "default" | Badge color. |
| variant | "solid" | "soft" | "bordered" | "solid" | Badge variant. |
| placement | "top-right" | "top-left" | "bottom-right" | "bottom-left" | ... | "top-right" | Badge position relative to child. |
| isDot | boolean | false | Render as a small dot. |
| isInvisible | boolean | false | Hide the badge. |
| max | number | 99 | Max count before showing +N. |
| size | "xs" | "xs-sm" | "sm" | "md" | "lg" | "xl" | "md" | Badge size. |
| showOutline | boolean | false | Show an outline ring. |
content—
string | number | ReactNode
Badge content (count or text).
color"default"
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Badge color.
variant"solid"
"solid" | "soft" | "bordered"
Badge variant.
placement"top-right"
"top-right" | "top-left" | "bottom-right" | "bottom-left" | ...
Badge position relative to child.
isDotfalse
boolean
Render as a small dot.
isInvisiblefalse
boolean
Hide the badge.
max99
number
Max count before showing +N.
size"md"
"xs" | "xs-sm" | "sm" | "md" | "lg" | "xl"
Badge size.
showOutlinefalse
boolean
Show an outline ring.