Examples
Examples
Basic Usage
The Badge only needs a minimal amount of provided data to be used. Simply pass in a label text.

Prefix
For optional prefixed content in the Badge component, you can include a cosmos-icon, cosmos-flag, cosmos-avatar, or custom content.

Best Practices:
- Consider the prefixed content as a meaningful embellishment to the provided text.
- When combining the Badge component with the Avatar as prefix you should set the size of the Avatar to 'x-small'
Kinds
There are 3 types of Badge kinds. Primary, Secondary and Cover-Up.
Primary & Secondary

Cover-Up

Best Practices:
- Consider when using kind 'cover-up' to ensure visibility of the badge no matter the background image.
Shape
The shape of the Badge can be controlled via the shape property.

Best Practices:
- Use the 'pill' shape when in a B2C context.
- Use the 'rectangle' shape when in a B2B context.
Link
The Badge can also be used as a link by setting the href property.

Appearance