Badge
Badges are used to highlight an item's status for quick recognition.
import { Badge } from "@chakra-ui/react"
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>
Editable Example
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>
Editable Example
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>
Editable Example
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>
Editable Example
The Badge component composes Box component so you can pass props for Box.
| Name | Type | Description | Default |
|---|
| colorScheme | string | | - |
| orientation | "horizontal" | "vertical" | | - |
| size | string | | - |
| styleConfig | Record<string, any> | | - |
| variant | string | | - |