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.

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

Proudly made in 🇳🇬

Released under the MIT License.

Copyright © 2019 Segun Adebayo