# 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts