Badge

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

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="" />
<Box ml="3">
<Text fontWeight="bold">
Fred Michael
<Badge ml="1" colorScheme="green">
New
</Badge>
</Text>
<Text fontSize="sm">UI Engineer</Text>
</Box>
</Flex>
<Flex>
<Avatar src="" />
<Box ml="3">
<Text fontWeight="bold">
Fred Michael
<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">
Fred Michael
<Badge ml="1" fontSize="0.8em" colorScheme="green">
New
</Badge>
</Text>
<Text fontSize="xl" fontWeight="bold">
Fred Michael
<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
"outline" | "solid" | "subtle"
Default
"subtle"

© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web

  • Creative Tim
  • Simmmple
  • Blog
  • License