Badge
Badges are used to highlight an item's status for quick recognition.
Import
import { Badge } from "@chakra-ui/react";
Usage
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.
Badge Variants
Pass the variant
prop and set it to either subtle
, solid
, or outline
to
get a different style.
Composition
You can also change the size of the badge by passing the fontSize
prop.
Props
The Badge
component composes Box
component so you can pass props for Box
.
colorScheme
colorScheme
Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
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"