The badge component is a great way to convey the category of information quickly or to draw special attention to a small string.
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.
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.
To change the size of the badge, you'll want to target the
fontSize property. The default size is