Badges are used as a small numerical value or status descriptor for UI elements.


npx nextui-cli@latest add badge
The above command is for individual installation only. You may skip this step if @nextui-org/react is already installed globally.








For a better positioning, you can use the shape property to define the shape of the badge.

Badge Visibility

You can control the visibility of the badge by using the isInvisible property.

Content Examples

Disable Outline

By default, the badge has an outline, you can disable it by using the showOutline={false} property.


It's not advisable to depend on the badge's content for accurate announcement. Instead, consider supplying a comprehensive description, such as using aria-label.


Badge Props

children *ReactNodeThe wrapped component.-
contentstring | number | ReactNodeThe content of the badge. The badge will be rendered relative to its children.-
variantsolid | flat | faded | shadowThe variant style of the badge.solid
colordefault | primary | secondary | success | warning | dangerThe color of the badge.default
sizesm | md | lgThe size of the
shapecircle | rectangleThe shape of the badge.rectangle
placementtop-right | top-left | bottom-right | bottom-leftThe placement of the
showOutlinebooleanIf true, the badge will have an outline.true
disableOutlinebooleanIf true, the badge will not have an outline. Deprecated use showOutline instead.false
disableAnimationbooleanIf true, the badge will not have an animation.false
isInvisiblebooleanIf true, the badge will be invisible.false
isOneCharbooleanIf true, the badge will have the same width and height.false
isDotbooleanIf true, the badge will have smaller dimensions.false
classNamesRecord<"base"|"badge", string>Allows to set custom class names for the badge slots.-