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
| Attribute | Type | Description | Default |
|---|---|---|---|
| children * | ReactNode | The wrapped component. | - |
| content | string | number | ReactNode | The content of the badge. The badge will be rendered relative to its children. | - |
| variant | solid | flat | faded | shadow | The variant style of the badge. | solid |
| color | default | primary | secondary | success | warning | danger | The color of the badge. | default |
| size | sm | md | lg | The size of the badge. | md |
| shape | circle | rectangle | The shape of the badge. | rectangle |
| placement | top-right | top-left | bottom-right | bottom-left | The placement of the badge. | top-right |
| showOutline | boolean | If true, the badge will have an outline. | true |
| disableOutline | boolean | If true, the badge will not have an outline. Deprecated use showOutline instead. | false |
| disableAnimation | boolean | If true, the badge will not have an animation. | false |
| isInvisible | boolean | If true, the badge will be invisible. | false |
| isOneChar | boolean | If true, the badge will have the same width and height. | false |
| isDot | boolean | If true, the badge will have smaller dimensions. | false |
| classNames | Record<"base"｜"badge", string> | Allows to set custom class names for the badge slots. | - |
