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.

Attributes

NameDescription
type: stringThe color of the badge
rounded: booleanToggle the rounded borders
ghost: booleanToggle ghost mode

CSS

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.