Badge
A component used to graphically display status or conditions alongside main information. In the Digital Agency Design System, it is defined as a Chip Label.
BadgeNew
<h2 class="h2">Badge<span class="badge">New</span></h2>Types
Label
Label
Label
Label
<span class="badge">Label</span>
<span class="badge badge-outline">Label</span>
<span class="badge badge-filled-outline">Label</span>
<span class="badge badge-fill">Label</span>Colors
Gray
Label
Label
Label
Label
<span class="badge badge-gray">Label</span>
<span class="badge badge-gray badge-outline">Label</span>
<span class="badge badge-gray badge-filled-outline">Label</span>
<span class="badge badge-gray badge-fill">Label</span>Blue
Label
Label
Label
Label
<span class="badge badge-blue">Label</span>
<span class="badge badge-blue badge-outline">Label</span>
<span class="badge badge-blue badge-filled-outline">Label</span>
<span class="badge badge-blue badge-fill">Label</span>Lightblue
Label
Label
Label
Label
<span class="badge badge-lightblue">Label</span>
<span class="badge badge-lightblue badge-outline">Label</span>
<span class="badge badge-lightblue badge-filled-outline">Label</span>
<span class="badge badge-lightblue badge-fill">Label</span>Cyan
Label
Label
Label
Label
<span class="badge badge-cyan">Label</span>
<span class="badge badge-cyan badge-outline">Label</span>
<span class="badge badge-cyan badge-filled-outline">Label</span>
<span class="badge badge-cyan badge-fill">Label</span>Green
Label
Label
Label
Label
<span class="badge badge-green">Label</span>
<span class="badge badge-green badge-outline">Label</span>
<span class="badge badge-green badge-filled-outline">Label</span>
<span class="badge badge-green badge-fill">Label</span>Lime
Label
Label
Label
Label
<span class="badge badge-lime">Label</span>
<span class="badge badge-lime badge-outline">Label</span>
<span class="badge badge-lime badge-filled-outline">Label</span>
<span class="badge badge-lime badge-fill">Label</span>Yellow
Label
Label
Label
Label
<span class="badge badge-yellow">Label</span>
<span class="badge badge-yellow badge-outline">Label</span>
<span class="badge badge-yellow badge-filled-outline">Label</span>
<span class="badge badge-yellow badge-fill">Label</span>Orange
Label
Label
Label
Label
<span class="badge badge-orange">Label</span>
<span class="badge badge-orange badge-outline">Label</span>
<span class="badge badge-orange badge-filled-outline">Label</span>
<span class="badge badge-orange badge-fill">Label</span>Red
Label
Label
Label
Label
<span class="badge badge-red">Label</span>
<span class="badge badge-red badge-outline">Label</span>
<span class="badge badge-red badge-filled-outline">Label</span>
<span class="badge badge-red badge-fill">Label</span>Magenta
Label
Label
Label
Label
<span class="badge badge-magenta">Label</span>
<span class="badge badge-magenta badge-outline">Label</span>
<span class="badge badge-magenta badge-filled-outline">Label</span>
<span class="badge badge-magenta badge-fill">Label</span>Purple
Label
Label
Label
Label
<span class="badge badge-purple">Label</span>
<span class="badge badge-purple badge-outline">Label</span>
<span class="badge badge-purple badge-filled-outline">Label</span>
<span class="badge badge-purple badge-fill">Label</span>