Badge

Used to highlight an item's status for quick recognition.

AI TipWant to skip the docs? Use the MCP Server

DefaultSuccessRemovedNew

Usage

import { Badge } from "@chakra-ui/react"

<Badge>Badge</Badge>

Render an icon within the badge directly

NewNew

Badges come in different variants

OutlineSolidSubtleSurface

Badges come in different sizes

NewNewNewNew

Prop	Default	Type
`colorPalette`	`gray`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` The color palette of the component
`variant`	`subtle`	`'solid' \| 'subtle' \| 'outline' \| 'surface' \| 'plain'` The variant of the component
`size`	`sm`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.