Badge component
Figma Component
Badge component is a visual label used to indicate status or highlight featured content.
Unresolved
Properties
| Name | Description | Default |
|---|---|---|
| contained | Display type of the badge. Default is true. | - |
| ghost | Should the badge have a ghost style on default state | - |
| icon | Icon appended before Badge content. | - |
| iconAfter | Icon appended after Badge content. Only visible when forwardedAs is set. | - |
| iconColor | Custom color of the icon | - |
| iconVisible | Should the appended icon be visible at all times | - |
| size | Badge size | - |
| variant | Badge color style type, defaults to | - |
Note: This table does not include native DOM and React properties like `onClick`, `ref`, `id`, `aria-label` (and many others) supported by this component.
Variants
Badge is available in two subsets of semantically and color named variants with overlapping visual style.
Semantic Variants
danger
info
success
warning
primary
secondary
Color Variants
brand-secondary
red
green
yellow
brand-primary
magenta
blue
orange
teal
Interactive
Badge can be used as an interactive element by defining the `forwardedAs` property
With Icon
An icon can be prepended or appended to the badge content. If required, a custom color can be defined via the `iconColor` prop.