Badge
Badges are used to highlight an item's status for quick recognition.
Import#
Usage#
Default
Editable Example
Badge Color#
Pass the variantColor prop to customize the color of the Badge. variantColor
can be any color key that exists in the theme.colors.
Learn more about theming.
Default
Success
Removed
New
Editable Example
Badge Variants#
Pass the variant prop and set to either subtle, solid, or outline to get a
different style.
Default
Success
Removed
Editable Example
Composition#
Segun Adebayo
New
UI Engineer
Editable Example
You can also change the size of the badge by passing fontSize prop.
Segun Adebayo
New
Editable Example
Props#
The Badge component composes Box component so you can pass props for Box.
| Name | Type | Default | Description |
|---|---|---|---|
variant | solid, subtle, outline | subtle | The style variant of the badge |
variantColor | string | gray | The color scheme to use for the badge. Must be a key in theme.colors |