Badge

Badges are used to highlight an item's status for quick recognition.

Import#

Usage#

Default
Editable Example

Badge Color#

Pass the colorScheme prop to customize the color of the Badge. colorScheme can be any color key that exists in theme.colors.

DefaultSuccessRemovedNew
Editable Example

Badge Variants#

Pass the variant prop and set it to either subtle, solid, or outline to get a different style.

DefaultSuccessRemoved
Editable Example

Composition#

Segun Adebayo New

UI Engineer

Editable Example

You can also change the size of the badge by passing the fontSize prop.

Segun Adebayo New

Editable Example

Props#

The Badge component composes Box component so you can pass props for Box.

NameTypeDefaultDescription
variantsolid, subtle, outlinesubtleThe style variant of the badge
colorSchemestringgrayThe color scheme to use for the badge. Must be a key in theme.colors
Edit this page

Made byChakraandRock Content