Badge

Badges are used to denote the status or version of an object or action. To display an object's category, use the tag component.

Import

import { Badge } from '@outfitio/outkit';

Usage

Badge color

Pass the variantColor prop to customize the color of the Badge. variantColor can be any color key that exists in the colour theme.

Badge variants

Pass the variant prop and set to either subtle, solid, or outline to get a different style.

Badge size

You can change the size of the badge by passing fontSize prop.

Accessibility

• Badge labels should be as succinct and scannable as possible.
• Color should never be the only means to distinguish status or priority - use clear and descriptive labels.

Best Practice

• Badge labels should be as succinct and scannable as possible. Only use two words if necessary to describe the status and differentiate it from other badges.
• Avoid using similar words to denote different statuses.
• Use established color patterns so that users can quickly identify the status or importance level.

Props

The Badge component composes Box component so you can pass props for Box.