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