Usage
Badge uses absolute positioning and should be placed inside a container with relative positioning. It can display text, numbers, or serve as a simple indicator.
Badge
Badge component displays small count or status indicators.
Playground
Experiment with all the properties of the Badge component in real time. Note: Badge uses absolute positioning and should be placed inside a relative container.
Properties
text
Text to display in the badge. Leave empty to use count or show as indicator.
count
Numeric count to display. Set to 0 to hide. Takes precedence over text.
maxCount
Maximum count to display. Values exceeding this show as 'max+'.
color
Color scheme of the badge.
size
Size of the badge.
radius
Border radius of the badge.
With Count
Use the count prop to display a numeric badge. The badge automatically hides when count is 0 or undefined.
With Max Count
Use maxCount to limit the displayed number. When count exceeds maxCount, the badge displays "maxCount+" to indicate there are more items.
Badge Props
Props
Prop | Default | Type |
|---|---|---|
text | undefined | string |
count | undefined | number |
maxCount | undefined | number |
color | "danger" | "neutral" | "primary" | "secondary" | "success" | "danger" | "warning" | "info" |
size | "medium" | "tiny" | "small" | "medium" | "large" |
radius | "full" | "none" | "tiny" | "small" | "medium" | "large" | "full" |