Badge Component

The badge component is a great way to convey the category of information quickly or to draw special attention to a small string.

Usage

Some best practices of using badges include:

  • Badges should be used sparingly to increase the importance of their existence.
  • Any color in the theme can be used for a badge. Use your discretion to make sure badges are legible.
  • Only the default, subtle variant should be used.

Colors

To change the color of the badge component, you'll need to use variantColor as it is a themed component. Simply using the color prop will only change the color of the text.

Webinar
Webinar
Webinar
Webinar
Webinar
Webinar
Editable Example

Size

To change the size of the badge, you'll want to target the fontSize property. The default size is xs.

Webinar
Editable Example