Badge
A component that graphically displays the state or situation of the main information. In the Digital Agency Design System, it is defined as a Chip Label.
Types
Label
Label
Label
Label
html
<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
html
<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
html
<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
html
<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
html
<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
html
<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
html
<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
html
<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
html
<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
html
<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
html
<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
html
<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>