Badges

A badge like labeling component, used to highlight information.

Label

Pill

A slightly more curved badge. Used for small counts and labeling.

2

Tag

Work in progress, not yet available. Create a tag like component.

Label

Colours

Available colour modifiers to provide meaning and give visual hierarchy.

Default Outline Inverted

Mono Outline Inverted

Slate Outline Inverted

Blue Outline Inverted

Purple Outline Inverted

Pink Outline Inverted

Red Outline Inverted

Orange Outline Inverted

Yellow Outline Inverted

Green Outline Inverted

Teal Outline Inverted

Indigo Outline Inverted

<span class="c-badge">Default</span>
<span class="c-badge c-badge--outline">Outline</span>
<span class="c-badge c-badge--inverted">Inverted</span>

<span class="c-badge c-badge--mono">Mono</span>
<span class="c-badge c-badge--outline c-badge--mono">Outline</span>
<span class="c-badge c-badge--inverted c-badge--mono">Inverted</span>

<span class="c-badge c-badge--slate">Slate</span>
<span class="c-badge c-badge--outline c-badge--slate">Outline</span>
<span class="c-badge c-badge--inverted c-badge--slate">Inverted</span>

<span class="c-badge c-badge--blue">Blue</span>
<span class="c-badge c-badge--outline c-badge--blue">Outline</span>
<span class="c-badge c-badge--inverted c-badge--blue">Inverted</span>

<span class="c-badge c-badge--purple">Purple</span>
<span class="c-badge c-badge--outline c-badge--purple">Outline</span>
<span class="c-badge c-badge--inverted c-badge--purple">Inverted</span>

<span class="c-badge c-badge--pink">Pink</span>
<span class="c-badge c-badge--outline c-badge--pink">Outline</span>
<span class="c-badge c-badge--inverted c-badge--pink">Inverted</span>

<span class="c-badge c-badge--red">Red</span>
<span class="c-badge c-badge--outline c-badge--red">Outline</span>
<span class="c-badge c-badge--inverted c-badge--red">Inverted</span>

<span class="c-badge c-badge--orange">Orange</span>
<span class="c-badge c-badge--outline c-badge--orange">Outline</span>
<span class="c-badge c-badge--inverted c-badge--orange">Inverted</span>

<span class="c-badge c-badge--yellow">Yellow</span>
<span class="c-badge c-badge--outline c-badge--yellow">Outline</span>
<span class="c-badge c-badge--inverted c-badge--yellow">Inverted</span>

<span class="c-badge c-badge--green">Green</span>
<span class="c-badge c-badge--outline c-badge--green">Outline</span>
<span class="c-badge c-badge--inverted c-badge--green">Inverted</span>

<span class="c-badge c-badge--teal">Teal</span>
<span class="c-badge c-badge--outline c-badge--teal">Outline</span>
<span class="c-badge c-badge--inverted c-badge--teal">Inverted</span>

<span class="c-badge c-badge--indigo">Indigo</span>
<span class="c-badge c-badge--outline c-badge--indigo">Outline</span>
<span class="c-badge c-badge--inverted c-badge--indigo">Inverted</span>

Size

Adjust the size of the badges, pills or tags above with the following size modifiers.

Label

Badge /w Icons

Add icons either left or right aligned within the badge.

Default