Badges and labels

Badges and labels are both graphic elements that contain small bits of information within semantic colored containers.

• Badges
• Labels

---

Badges

Badges are used to highlight new or unread content and their main purpose is to show new notifications or unread messages on the header navigation element. Besides the badge theme color, badges also come in validation semantic colors.

Code output

HTML Markup

Copy<span class="badge">99</span>
<span class="badge badge-info">99</span>
<span class="badge badge-error">99</span>
<span class="badge badge-warning">99</span>
<span class="badge badge-success">99</span>

Badges can also be combined with the pre-defined color scales.

Code output

HTML Markup

Copy<span class="badge bg-categorical-1">99</span>
<span class="badge bg-categorical-2">99</span>
<span class="badge bg-categorical-3">99</span>
<span class="badge bg-categorical-4">99</span>
<span class="badge bg-categorical-5">99</span>
<span class="badge bg-categorical-6">99</span>
<span class="badge bg-categorical-7">99</span>
<span class="badge bg-categorical-8">99</span>
<span class="badge bg-categorical-9">99</span>
<span class="badge bg-categorical-10">99</span>

---

Labels

Labels are used to indicate item classification within a list of items or to present a unique property of an item. Labels come in two sets of colors - a theme based group of monchromatic colors to classify different discreet values, and a set of validation semantic colors.

Code output

HTML Markup

Copy<span class="label">GROUP 1</span>
<span class="label label-d2">GROUP 2</span>
<span class="label label-d3">GROUP 3</span>
<span class="label label-d4">GROUP 4</span>

<span class="label label-info">INFO</span>
<span class="label label-error">ERROR</span>
<span class="label label-warning">WARNING</span>
<span class="label label-success">SUCCESS</span>

Labels can also be combined with the pre-defined color scales.

Code output

HTML Markup

Copy<span class="label bg-categorical-1">LABEL</span>
<span class="label bg-categorical-2">LABEL</span>
<span class="label bg-categorical-3">LABEL</span>
<span class="label bg-categorical-4">LABEL</span>
<span class="label bg-categorical-5">LABEL</span>
<span class="label bg-categorical-6">LABEL</span>
<span class="label bg-categorical-7">LABEL</span>
<span class="label bg-categorical-8">LABEL</span>
<span class="label bg-categorical-9">LABEL</span>
<span class="label bg-categorical-10">LABEL</span>