Badges

Badges are used to quickly indicate status or information to a user visually. Each variant correlates to a specific status or value. Badges Design Guidelines.

active

Edit the code below to see your changes live!

API

Badge

Prop Name
Type
Default
Description
label *string

The text applied to the component.

variantdanger | secondary | success | warning | primarysecondary

Determines which badge to display.

Props ending with * are required

Inherited Props

Expand

Margin Props

Variants

There are five types of variants to choose from: success, secondary, warning, danger, and primary. You can determine what type by using the variant prop.

secondarysuccesswarningdangerprimary

Edit the code below to see your changes live!

Beta