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

import { Badge } from "@nextui-org/react";


Badge with default styles, used in standalone when content prop is empty.


Use size prop to change the size of the badge.


We preset a series of colorful Badge styles for use in different situations.


Use enableShadow prop to add a shadow to the badge.


Use the dot variant to create a dot badge. Useful for indicating a status or showing a notification that there is new content.


Use the points variant to create a badge with a points animation. Useful for indicating a writing or loading status.


Use the bordered variant to create a badge with a border and an empty background.


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.


Use the isSquared prop to create a badge with squared corners.


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.


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.


Badge Props

childrenReactNodeThe wrapped component.-
contentstring number ReactNodeThe content of the badge. The badge will be rendered relative to its children.-
colorSimpleColorsThe badge color.default
sizeNormalSizesThe badge
variantBadgeVariantThe badge variation.default
placementBadgePlacementsThe placement of the badge
borderWeightNormalWeightsThe border weight for bordered badge variation.normal
shapecircle rectangleThe wrapped shape the badge should overlap.rectangle
horizontalOffsetstring numberThe horizontal offset of the badge content.-
verticalOffsetstring numberThe vertical offset of the badge content.-
isInvisiblebooleanWhether the badge is invisible.false
enableShadowbooleanWhether the badge shadow should be enabled.false
isSquaredbooleanWhether the badge corners should be squared.false
disableOutlinebooleanWhether the badge outline should be disabled.false
disableAnimationbooleanWhether the badge content animation should be disabled.false
cssStitches.CSSOverride Default CSS style.-
askeyof JSX.IntrinsicElementsChanges 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";
gradient blue backgroundgradient violet background