Badge

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

    Source@chakra-ui/layout

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.Root src='https://bit.ly/sage-adebayo'>
<Avatar.Image />
<Avatar.Fallback />
</Avatar.Root>
<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>
Edit this page on GitHub

Proudly made inNigeria by Segun Adebayo

Deployed by â–² Vercel