Badges

Documentation and examples for badges, our small count and labeling component.

Example

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Example heading New

<h1 class="text-5xl mb-2 font-medium">
  Example heading
  <span class="bg-gray-600 rounded text-gray-100 px-2 py-1">
    New
  </span>
</h1>
<h2 class="text-4xl mb-2 font-medium">
  Example heading
  <span class="bg-gray-600 rounded text-gray-100 px-2 py-1">
    New
  </span>
</h2>
<h3 class="text-3xl mb-2 font-medium">
  Example heading
  <span class="bg-gray-600 rounded text-gray-100 px-2 py-1">
    New
  </span>
</h3>
<h4 class="text-2xl mb-2 font-medium">
  Example heading
  <span class="bg-gray-600 rounded text-gray-100 px-2 py-1">
    New
  </span>
</h4>
<h5 class="text-xl mb-2 font-medium">
  Example heading
  <span class="bg-gray-600 rounded text-gray-100 px-2 py-1">
    New
  </span>
</h5>
<h6 class="mb-2 font-medium">
  Example heading
  <span class="bg-gray-600 rounded text-gray-100 px-2 py-1">
    New
  </span>
</h6>