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

PropertiesInstructionstypeDefault
childrenBaseReactNode-
classNameclassNamestring-
countDisplay contentReactNode-
countClassNamecount classNamestring-
dotDisplayed as a little dot.booleanfalse
overflowCountCap number valuenumber-
positionBadge position, optional left Top, left Bottom, right Top, right BottomstringrightTop
countStylestyle of content (>=v2.59.1)CSSProperties-
themeBadge theme, one of solid, light, invertedstringsolid
typeBadge type, one of primary, secondary, tertiary, danger, warning,success,stringprimary

Content Guidelines

  • Capitalize the first letter

Design Tokens