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.

Proudly made inNigeria by Segun Adebayo

Deployed by Vercel