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
| Prop | Type | Default |
children | | |
content | | |
variant | | "solid" |
color | | "default" |
size | | "md" |
shape | | "rectangle" |
placement | | "top-right" |
showOutline | | true |
disableOutline | | false |
disableAnimation | | false |
isInvisible | | false |
isOneChar | | false |
isDot | | false |
classNames | |
