Show · Badge
Badge
Badge generates a small badge to give users tips.
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