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
variantdanger | secondary | success | warningsecondary

Determines which badge to display.

Props ending with * are required

Inherited Props

Expand

Margin Props

Variants

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

secondarysuccesswarningdanger

Edit the code below to see your changes live!

Beta