Skip to main content

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

Type
"whiteAlpha" | "blackAlpha" | "gray" | "red" | "orange" | "yellow" | "green" | "teal" | "blue" | "cyan" | "purple" | "pink" | "linkedin" | "facebook" | "messenger" | "whatsapp" | "twitter" | "telegram"
Default
"gray"

size

Description

Sizes for Badge are not implemented in the default theme. You can extend the theme to implement them.

Type
string

variant

Type
"solid" | "subtle" | "outline"
Default
"subtle"