Skip to Content
Sponsor

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. Learn more about theming.

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.

NameTypeDescriptionDefault
colorSchemestring-
cssInterpolation<{}>The emotion's css style object-
orientation"horizontal" | "vertical"-
sizestring-
styleConfigRecord<string, any>-
variantstring-
Edit this page