Badges

Badges convey dynamic information, such as counts or status. A badge can include labels or numbers.

1
32
mail
999+

Mail
chat_bubble
1

Chat
groups

Rooms

Badge Types

There are 2 types of badges: small and large

              
<!-- Small badge -->
<div class="w-1.5 h-1.5 rounded-full bg-error-600 dark:bg-error-200"></div>
<!-- badge -->
<div class="w-4 h-4 flex items-center justify-center rounded-full text-[11px] leading-none tracking-[.045em] font-medium bg-error-600 dark:bg-error-200 text-white dark:text-error-800">1</div>
<!-- Badge max characters -->
<div class="min-w-[22px] px-1 h-4 flex items-center justify-center rounded-full  text-[11px] leading-none tracking-[.045em] font-medium bg-error-600 dark:bg-error-200 text-white dark:text-error-800">999+</div>

Positioned

Example of using the badge on the top right of the icon.

groups
chat_bubble
1
mail
999+
              
<!-- small -->
<div class="relative w-6 h-6">
  <span class="material-symbols-outlined">groups</span>
  <div class="absolute top-1 right-0 w-1.5 h-1.5 rounded-full bg-error-600 dark:bg-error-200"></div>
</div>

<!-- large -->
<div class="relative w-6 h-6">
  <span class="material-symbols-outlined">chat_bubble</span>
  <div class="absolute -top-1 -right-2 w-4 h-4 flex items-center justify-center rounded-full text-[11px] leading-none tracking-[.045em] font-medium bg-error-600 dark:bg-error-200 text-white dark:text-error-800">1</div>
</div>

<!-- large max -->
<div class="relative w-6 h-6">
  <span class="material-symbols-outlined">mail</span>
  <div class="absolute -top-1 -right-6 min-w-[22px] px-1 h-4 flex items-center justify-center rounded-full text-[11px] leading-none tracking-[.045em] font-medium bg-error-600 dark:bg-error-200 text-white dark:text-error-800">999+</div>
</div>