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. |
variant | danger | secondary | success | warning | secondary | Determines which badge to display. |
Props ending with * are required
Inherited Props
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