Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundGuidesBlog
Sponsor

Badge

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

SourceStorybookRecipe
DefaultSuccessRemovedNew

Usage

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

Examples

Icon

Render an icon within the badge directly

NewNew

Variants

Badges come in different variants

OutlineSolidSubtleSurface

Sizes

Badges come in different sizes

NewNewNewNew

Props

PropDefaultType
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.

Previous

Avatar

Next

Breadcrumb