Badge

Badges are used to highlight an item's status for quick recognition.

View sourceView theme source@chakra-ui/badge

Import

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

Usage

<Badge>Default</Badge>

<Badge>Default</Badge>

Badge Color

Pass the colorScheme prop to customize the color of the Badge. colorScheme can be any color key that exists in theme.colors. Learn more about theming.

<Stack direction="row"> <Badge>Default</Badge> <Badge colorScheme="green">Success</Badge> <Badge colorScheme="red">Removed</Badge> <Badge colorScheme="purple">New</Badge> </Stack>

<Stack direction="row">
  <Badge>Default</Badge>
  <Badge colorScheme="green">Success</Badge>
  <Badge colorScheme="red">Removed</Badge>
  <Badge colorScheme="purple">New</Badge>
</Stack>

Badge Variants

Pass the variant prop and set it to either subtle, solid, or outline to get a different style.

<Stack direction="row"> <Badge variant="outline" colorScheme="green"> Default </Badge> <Badge variant="solid" colorScheme="green"> Success </Badge> <Badge variant="subtle" colorScheme="green"> Removed </Badge> </Stack>

<Stack direction="row">
  <Badge variant="outline" colorScheme="green">
    Default
  </Badge>
  <Badge variant="solid" colorScheme="green">
    Success
  </Badge>
  <Badge variant="subtle" colorScheme="green">
    Removed
  </Badge>
</Stack>

Composition

<Flex> <Avatar src="https://bit.ly/sage-adebayo" /> <Box ml="3"> <Text fontWeight="bold"> Segun Adebayo <Badge ml="1" colorScheme="green"> New </Badge> </Text> <Text fontSize="sm">UI Engineer</Text> </Box> </Flex>

<Flex>
  <Avatar src="https://bit.ly/sage-adebayo" />
  <Box ml="3">
    <Text fontWeight="bold">
      Segun Adebayo
      <Badge ml="1" colorScheme="green">
        New
      </Badge>
    </Text>
    <Text fontSize="sm">UI Engineer</Text>
  </Box>
</Flex>

You can also change the size of the badge by passing the fontSize prop.

<Text fontSize="xl" fontWeight="bold"> Segun Adebayo <Badge ml="1" fontSize="0.8em" colorScheme="green"> New </Badge> </Text>

<Text fontSize="xl" fontWeight="bold">
  Segun Adebayo
  <Badge ml="1" fontSize="0.8em" colorScheme="green">
    New
  </Badge>
</Text>

Props

The Badge component composes Box component so you can pass props for Box.

colorScheme

Type

"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"

Default

"gray"

size

Description

Sizes for Badge are not implemented in the default theme. You can extend the theme to implement them.

Type

string

variant

Type

"solid" | "subtle" | "outline"

Default

"subtle"