Demos
How to import
Basic Usage
The basic type of Badge is
count. The dot property changes a badge into a small dot. The two are mutually exclusive, giving priority to rendering dot. When passed in a node type, the node will be rendered directly.Maximum Value
You can use the
overflowCount property to cap the number value of the badge content. When the actual value exceeds that value, it will be formatted into ${overflowCount}+.Position
You can use the
position property to set the position of the badge to its children. The prop uses one of: leftTop, leftBottom, rightTop(default), rightBottom.Theming
You can use the
theme and type prop to customize the styling. theme supports the following values: solid(default), light, inverted.type support the following values: primary(default),secondary,tertiary,warning and danger.Independent Usage
Badge can be used alone when it is a stand-alone element.
API Reference
| Properties | Instructions | type | Default |
|---|---|---|---|
| children | Base | ReactNode | - |
| count | Display content | ReactNode | - |
| dot | Displayed as a little dot. | boolean | false |
| overflowCount | Cap number value | number | - |
| position | Badge position, optional left Top, left Bottom, right Top, right Bottom | string | rightTop |
| style | style | CSSProperties | - |
| theme | Badge theme, one of solid, light, inverted | string | solid |
| type | Badge type, one of primary, secondary, sense, danger, warning | string | primary |
Content Guidelines
- Capitalize the first letter
