"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
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 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>
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>
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>
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>
Props#
The Badge
component composes Box
component so you can pass props for Box
.
colorScheme
colorScheme
Type
Default
"gray"
size
size
Description
Sizes for Badge
are not implemented in the default theme. You can extend the theme to implement them.
Type
string
variant
variant
Type
"solid" | "subtle" | "outline"
Default
"subtle"