Badge

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

Chakra UI Pro: Start your application or marketing site with a growing collection of beautiful and responsive UI components.

Ads via Chakra UI

Import#

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

Usage#

Default

<Badge>Default</Badge>

<Badge>Default</Badge>

Editable Example

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.

DefaultSuccessRemovedNew

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

Editable Example

Badge Variants#

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

DefaultSuccessRemoved

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

Editable Example

Composition#

Segun Adebayo New

UI Engineer

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

Editable Example

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

Segun Adebayo New

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

Editable Example

Props#

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

Name	Type	Description	Default
colorScheme	`"blue" \| "cyan" \| "gray" \| "green" \| "orange" \| "pink" \| "purple" \| "red" \| "teal" \| "yellow" \| "whiteAlpha" \| "blackAlpha" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"`		`"gray"`
size	`string`	Sizes for `Badge` are not implemented in the default theme. You can extend the theme to implement them.	-
variant	`"outline" \| "solid" \| "subtle"`		`"subtle"`

Edit this page