Badge

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

Storybook @nextui-org/badge Source Styles source

Installation

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`	`ReactNode`
`content`	`string \| number \| ReactNode`
`variant`	`solid \| flat \| faded \| shadow`	`"solid"`
`color`	`default \| primary \| secondary \| success \| warning \| danger`	`"default"`
`size`	`sm \| md \| lg`	`"md"`
`shape`	`circle \| rectangle`	`"rectangle"`
`placement`	`top-right \| top-left \| bottom-right \| bottom-left`	`"top-right"`
`showOutline`	`boolean`	`true`
`disableOutline`	`boolean`	`false`
`disableAnimation`	`boolean`	`false`
`isInvisible`	`boolean`	`false`
`isOneChar`	`boolean`	`false`
`isDot`	`boolean`	`false`
`classNames`	`Partial<Record<"base"｜"badge", string>>`

Avatar Breadcrumbs

On this page

Installation
Import
Usage
Sizes
Colors
Variants
Placements
Shapes
Badge Visibility
Content Examples
Disable Outline
Accessibility
Slots
API
Badge Props
Back to top