Build faster with Premium Chakra UI Components 💎

Learn more
Skip to Content
DocsPlaygroundEnterpriseBlog
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' | 'accent'

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

Previous

Avatar

Next

Breadcrumb