Badge

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

DefaultSuccessRemovedNew

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

const Demo = () => {
  return (
    <Stack direction="row">
      <Badge>Default</Badge>
      <Badge colorPalette="green">Success</Badge>
      <Badge colorPalette="red">Removed</Badge>
      <Badge colorPalette="purple">New</Badge>
    </Stack>
  )
}

Usage

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

<Badge>Badge</Badge>

Examples

Icon

Render an icon within the badge directly

NewNew

import { Badge, Stack } from "@chakra-ui/react"
import { HiAtSymbol, HiStar } from "react-icons/hi"

const Demo = () => {
  return (
    <Stack align="flex-start">
      <Badge variant="solid" colorPalette="blue">
        <HiStar />
        New
      </Badge>
      <Badge variant="solid" colorPalette="green">
        New
        <HiAtSymbol />
      </Badge>
    </Stack>
  )
}

Variants

Badges come in different variants

OutlineSolidSubtleSurface

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

const Demo = () => {
  return (
    <Stack direction="row">
      <Badge variant="outline">Outline</Badge>
      <Badge variant="solid">Solid</Badge>
      <Badge variant="subtle">Subtle</Badge>
      <Badge variant="surface">Surface</Badge>
    </Stack>
  )
}

Sizes

Badges come in different sizes

NewNewNewNew

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

const Demo = () => {
  return (
    <HStack>
      <Badge size="xs">New</Badge>
      <Badge size="sm">New</Badge>
      <Badge size="md">New</Badge>
      <Badge size="lg">New</Badge>
    </HStack>
  )
}

Props

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.

Avatar

Breadcrumb