Skip to main content

Badges

They're useful when you want to add additional info. Like a version number of a project or for status messages for individual items.

Colors

Badges come as default, brand, info, warning, success and error

To use, add the color modifier class:

Rounded

Make your badges rounded with the .c-badge--rounded modifier.

Ghost

Remove your badges bodies with the .c-badge--ghost modifier.

Attributes

Attribute Description
type The color of the badge
rounded (boolean) Toggle the rounded borders
ghost (boolean) Toggle ghost mode