Badge

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


Installation

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.

Import

Usage

Sizes

Colors

Variants

Placements

Shapes

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.

Accessibility

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.

Slots

The Badge component has two slots:

  • base: The base slot for the badge, which is the container of the badge.

  • badge: The main slot for the badge content, which is the content of the badge.

API

Badge Props

AttributeTypeDescriptionDefault
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 badge.md
shapecircle | rectangleThe shape of the badge.rectangle
placementtop-right | top-left | bottom-right | bottom-leftThe placement of the badge.top-right
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.-