Dialtone

Badge

View Storybook

A badge is a compact UI element that provides brief, descriptive information about an element. It is terse, ideally one word.

Classes

ClassApplies toDescription

Examples

<span class="d-badge">...</span>
<span class="d-badge d-badge--black-700">...</span>
<span class="d-badge d-badge--green-400">...</span>
<span class="d-badge d-badge--orange-400">...</span>
<span class="d-badge d-badge--pink-300">...</span>
<span class="d-badge d-badge--pink-500">...</span>
<span class="d-badge d-badge--pink-600">...</span>
<span class="d-badge d-badge--pink-700">...</span>
<span class="d-badge d-badge--purple-100">...</span>
<span class="d-badge d-badge--purple-300">...</span>
<span class="d-badge d-badge--purple-500">...</span>
<span class="d-badge d-badge--purple-700">...</span>
<span class="d-badge d-badge--red-500">...</span>
<span class="d-badge d-badge--white">...</span>
<span class="d-badge d-badge--yellow-300">...</span>
Last Updated: