Badge component
Figma Component
Badge component is a visual label used to indicate status or highlight featured content.
Unresolved
Properties
| Name | Description | Default |
|---|---|---|
| ghost | Should the badge have a ghost style on default state | - |
| icon | Icon appended before Badge content | - |
| iconAfter | Icon appended after Badge content | - |
| iconColor | Custom color of the icon | - |
| iconVisible | Should the appended icon be visible at all times | - |
| size | Badge size | - |
| variant | Badge color style type | - |
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
blue
green
yellow
magenta
teal
orange
red
Size
Badge component is available in medium and small sizes. The default size is `medium`.
Small
Medium (default)
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.