Application toolkit - Badge

A visual indicator for a value or status descriptor for UI elements.

Solid color variants

The default form of solid color badges.

Open this solid colour variants badge example in new window
Copy solid colour variants badge code 
<div class="flex flex-wrap gap-2 items-center">
  <span class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-hs2-primary text-white">Primary</span>
  <span class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-hs2-secondary text-white">Secondary</span>
  <span class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-hs2-info text-white">Info</span>
  <span class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-hs2-warning text-white">Warning</span>
  <span class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-hs2-success text-white">Success</span>
  <span class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-hs2-danger text-white">Danger</span>
</div>
Close solid colour variants badge code

Rounded badges

Use the border radius utility classes to make avatars more rounded.

Open this rounded badge example in new window
Copy rounded badge code 
<span class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-hs2-primary text-white">Badge</span>
Close rounded badge code

Max width

Avoid truncation wherever possible by using shorter text in badges. The truncated text is not focusable or accessible.

Open this max width badge example in new window
Copy max width badge code 
<span class="max-w-[10rem] truncate whitespace-nowrap inline-block py-1.5 px-3 rounded-md text-xs font-medium bg-hs2-primary text-white">This content is a little bit longer.</span>
Close max width badge code

Badge with indicator

Use an indicator appearance to show indication.

Open this with indicator badge example in new window
Copy with indicator badge code 
<span class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-hs2-primary text-white">
  <span class="w-1.5 h-1.5 inline-block bg-white rounded-full"></span>
  Badge
</span>
Close with indicator badge code

Badge with remove button

Use badge with remove button.

Open this with remove button badge example in new window
Copy with remove button badge code 
<span class="inline-flex items-center gap-1.5 py-1.5 pl-3 pr-2 rounded-full text-xs font-medium bg-hs2-primary text-white">
  Badge
  <button type="button" class="flex-shrink-0 h-4 w-4 inline-flex items-center justify-center rounded-full text-white hover:bg-hs2-primary-600 focus:outline-none focus:bg-hs2-primary-400">
    <span class="sr-only">Remove badge</span>
    <svg class="h-4 w-4" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
      <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
    </svg>
  </button>
</span>
Close with remove button badge code

With button

Badges can be used as part of links or buttons to provide a counter.

Open this with button badge example in new window
Copy with button badge code 
<a class="relative py-3 px-4 inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-semibold bg-hs2-primary text-white hover:bg-hs2-primary-600 focus:outline-none focus:ring-2 focus:ring-hs2-primary focus:ring-offset-2 transition-all text-sm dark:focus:ring-offset-gray-800" href="#">
  Notifications
  <span class="inline-flex items-center py-0.5 px-1.5 rounded-full text-xs font-medium bg-hs2-secondary text-white">5</span>
</a>
Close with button badge code

Positioned

Position a badge in the corner of a link, button, avatar or any other component.

Open this positioned badge example in new window
Copy positioned badge code 
<a class="relative inline-flex flex-shrink-0 justify-center items-center h-[3.375rem] w-[3.375rem] rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" href="#">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
  </svg>
  <span class="absolute top-0 right-0 inline-flex items-center py-0.5 px-1.5 rounded-full text-xs font-medium transform -translate-y-1/2 translate-x-1/2 bg-hs2-secondary text-white">99+</span>
</a>
Close positioned badge code

Profile

Display a badge without a specific count.

Open this profile badge example in new window
Copy profile badge code 
<a class="relative inline-flex flex-shrink-0 justify-center items-center h-[3.375rem] w-[3.375rem] rounded-md border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-white focus:ring-blue-600 transition-all text-sm dark:bg-slate-900 dark:hover:bg-slate-800 dark:border-gray-700 dark:text-gray-400 dark:hover:text-white dark:focus:ring-offset-gray-800" href="#">
  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
    <path d="M8 16a2 2 0 0 0 2-2H6a2 2 0 0 0 2 2zM8 1.918l-.797.161A4.002 4.002 0 0 0 4 6c0 .628-.134 2.197-.459 3.742-.16.767-.376 1.566-.663 2.258h10.244c-.287-.692-.502-1.49-.663-2.258C12.134 8.197 12 6.628 12 6a4.002 4.002 0 0 0-3.203-3.92L8 1.917zM14.22 12c.223.447.481.801.78 1H1c.299-.199.557-.553.78-1C2.68 10.2 3 6.88 3 6c0-2.42 1.72-4.44 4.005-4.901a1 1 0 1 1 1.99 0A5.002 5.002 0 0 1 13 6c0 .88.32 4.2 1.22 6z" />
  </svg>
  <span class="absolute top-0 right-0 inline-flex items-center w-3.5 h-3.5 rounded-full border-2 border-white text-xs font-medium transform -translate-y-1/2 translate-x-1/2 bg-hs2-success text-white">
    <span class="sr-only">Badge value</span>
  </span>
</a>
Close profile badge code