Badge

A badge is a visual label or indicator used to convey status or highlight content.

Usage

Sizes

There are 4 different sizes for badge. xs, sm, md and lg.

In order to use the variants, you just have to think of the variant and add the type with a hyphen.

The available variants are:

• primary
• info
• success
• warning
• danger
• brown
• orange
• purple
• pink

And then you have the variant types:

• subtle
• outline

So, if you want to get the primary + subtle variant, the final variant would be primary-subtle.

Primary, Subtle and Outline

Success, Warning, Danger & Info

Brown, Orange, Purple & Pink

Subtle

Outline

Appearance

You can use the appearance prop to change the appearance of the badge. The available options are round and number

Tag

You can use the type prop to change the role of the badge to be of type button. This allows the badge to behave like a button and have the appearance of a tag.

API Reference