"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>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
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
"outline" | "solid" | "subtle"
Default
"subtle"
© 2021, Made with ❤️ by Creative Tim & Simmmple for a better web