Documentation
Badge
Badges are used as a small numerical value or status descriptor for UI elements.
import { Badge } from "@nextui-org/react";
Default
Badge with default styles, used in standalone when content prop is empty.
Sizes
Use size prop to change the size of the badge.
Colors
We preset a series of colorful Badge styles for use in different situations.
Shadow
Use enableShadow prop to add a shadow to the badge.
Dot
Use the dot variant to create a dot badge. Useful for indicating a status or showing a notification that there is new content.
Points
Use the points variant to create a badge with a points animation. Useful for indicating a writing or loading status.
Bordered
Use the bordered variant to create a badge with a border and an empty background.
Flat
Use the flat variant to create a badge with a flat background that contrasts with the text based on the selected color. Learn more about the color palette.
Squared
Use the isSquared prop to create a badge with squared corners.
Content
If you pass the content prop, the badge will be rendered relative to its children.
Content Placements
Use the placement prop to change the placement of the badge content. The default placement is top-right.
Content Shape
Use the shape prop to place the badge content relative to the corner of the children element. The default shape is rectangle.
Content Visibility
The visibility of badges can be controlled using the isInvisible prop.
Content Offset
You can use the verticalOffset and horizontalOffset props to adjust the position of the badge content. The default offset is 5% for rectangles and 15% for circles.
Disable Outline
Use the disableOutline prop to remove the outline from the badge. The default outline is 2px with a solid background color.
Accessibility
You shouldn't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with aria-label.
APIs
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. | - |
| color | SimpleColors | The badge color. | default |
| size | NormalSizes | The badge size. | md |
| variant | BadgeVariant | The badge variation. | default |
| placement | BadgePlacements | The placement of the badge content. | top-right |
| borderWeight | NormalWeights | The border weight for bordered badge variation. | normal |
| shape | circle rectangle | The wrapped shape the badge should overlap. | rectangle |
| horizontalOffset | string number | The horizontal offset of the badge content. | - |
| verticalOffset | string number | The vertical offset of the badge content. | - |
| isInvisible | boolean | Whether the badge is invisible. | false |
| enableShadow | boolean | Whether the badge shadow should be enabled. | false |
| isSquared | boolean | Whether the badge corners should be squared. | false |
| disableOutline | boolean | Whether the badge outline should be disabled. | false |
| disableAnimation | boolean | Whether the badge content animation should be disabled. | false |
| css | Stitches.CSS | Override Default CSS style. | - |
| as | keyof JSX.IntrinsicElements | Changes which tag component outputs. | span |
Badge types
Simple Colors
type SimpleColors = | "default" | "primary" | "secondary" | "success" | "warning" | "error";
Normal Sizes
type NormalSizes = "xs" | "sm" | "md" | "lg" | "xl";
Badge Variants
type BadgeVariants = "default" | "flat" | "dot" | "points" | "bordered";
Badge Placements
type BadgePlacements = | "top-right" | "top-left" | "bottom-right" | "bottom-left";
Normal Weights
type NormalWeights = "light" | "normal" | "bold" | "extrabold" | "black";
