Tailwind CSS Status Badges Blocks

Status Badges

Status badges with tooltip, neutral, soft, and outlined variants.

Status badges pair a line-and-dot indicator with hover-triggered tooltip content.

<div class="inline-flex flex-wrap gap-2">
                  
                  <div class="hs-tooltip inline-block">
                    <span class="hs-tooltip-toggle py-1 px-2.5 inline-flex items-center gap-x-2.5 bg-green-100 text-green-700 text-start text-nowrap font-medium text-[13px] rounded-full dark:bg-green-500/10 dark:text-green-400">
                      <span class="relative w-2.5 h-px bg-green-700 after:absolute after:top-1/2 after:-inset-e-1 after:size-1.5 after:bg-green-700 after:rounded-full after:-translate-y-1/2 dark:bg-green-400 dark:after:bg-green-400"></span>
                      On track
                    </span>
                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 max-w-xs bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                      Everything is progressing as planned
                    </span>
                  </div>

<div class="hs-tooltip inline-block">
                    <span class="hs-tooltip-toggle py-1 px-2.5 inline-flex items-center gap-x-2.5 bg-red-100 text-red-700 text-start text-nowrap font-medium text-[13px] rounded-full dark:bg-red-500/10 dark:text-red-400">
                      <span class="relative w-2.5 h-px bg-red-700 after:absolute after:top-1/2 after:-inset-s-1 after:size-1.5 after:bg-red-700 after:rounded-full after:-translate-y-1/2 dark:bg-red-400 dark:after:bg-red-400"></span>
                      At risk
                    </span>
                    <span class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 max-w-xs bg-tooltip border border-tooltip-line text-xs text-tooltip-foreground rounded-lg" role="tooltip">
                      The project is failing to meet key objectives, deadlines, or scope
                    </span>
                  </div>
                  
                </div>

Open related project details page

Neutral Status Badges Pro

Compact status badges use a neutral container with a colored side marker at the start.

<div class="inline-flex flex-wrap gap-2">
                    <div class="flex items-center gap-x-1.5 py-0.5 px-2 bg-surface rounded-md">
                      <span class="w-1 h-3 bg-surface-3 rounded-full"></span>
                      <span class="font-medium text-[13px] text-foreground">
                        No status
                      </span>
                    </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 bg-surface rounded-md">
                      <span class="w-1 h-3 bg-teal-500 rounded-full"></span>
                      <span class="font-medium text-[13px] text-foreground">
                        Connected
                      </span>
                    </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 bg-surface rounded-md">
                      <span class="w-1 h-3 bg-blue-500 rounded-full"></span>
                      <span class="font-medium text-[13px] text-foreground">
                        Importing
                      </span>
                    </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 bg-surface rounded-md">
                      <span class="w-1 h-3 bg-red-500 rounded-full"></span>
                      <span class="font-medium text-[13px] text-foreground">
                        Attention
                      </span>
                    </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 bg-surface rounded-md">
                      <span class="w-1 h-3 bg-orange-500 rounded-full"></span>
                      <span class="font-medium text-[13px] text-foreground">
                        Warning
                      </span>
                    </div>
                  </div>

Soft Status Badges Pro

Tinted status badges keep the same marker layout with color-matched backgrounds and text.

<div class="inline-flex flex-wrap gap-2">
                    <div class="flex items-center gap-x-1.5 py-0.5 px-2 bg-surface rounded-md">
                      <span class="w-1 h-3 bg-secondary rounded-full"></span>
                      <span class="font-medium text-[13px] text-foreground">
                        No status
                      </span>
                    </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 bg-teal-100 dark:bg-teal-500/10 rounded-md">
                      <span class="w-1 h-3 bg-teal-800 dark:bg-teal-500 rounded-full"></span>
                      <span class="font-medium text-[13px] text-teal-800 dark:text-teal-500">
                        Connected
                      </span>
                    </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 bg-blue-100 dark:bg-blue-500/10 rounded-md">
                      <span class="w-1 h-3 bg-blue-800 dark:bg-blue-500 rounded-full"></span>
                      <span class="font-medium text-[13px] text-blue-800 dark:text-blue-500">
                        Importing
                      </span>
                    </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 bg-red-100 dark:bg-red-500/10 rounded-md">
                      <span class="w-1 h-3 bg-red-800 dark:bg-red-500 rounded-full"></span>
                      <span class="font-medium text-[13px] text-red-800 dark:text-red-500">
                        Attention
                      </span>
                    </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 bg-orange-100 dark:bg-orange-500/10 rounded-md">
                      <span class="w-1 h-3 bg-orange-800 dark:bg-orange-500 rounded-full"></span>
                      <span class="font-medium text-[13px] text-orange-800 dark:text-orange-500">
                        Warning
                      </span>
                    </div>
                  </div>

Outlined Status Badges Pro

Outlined status badges keep the same marker layout inside bordered containers with no fill.

<div class="inline-flex flex-wrap gap-2">
                  <div class="flex items-center gap-x-1.5 py-0.5 px-2 border border-line-2 rounded-md">
                    <span class="w-1 h-3 bg-surface-3 rounded-full"></span>
                    <span class="font-medium text-[13px] text-foreground">
                      No status
                    </span>
                  </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 border border-line-2 rounded-md">
                    <span class="w-1 h-3 bg-teal-500 rounded-full"></span>
                    <span class="font-medium text-[13px] text-foreground">
                      Connected
                    </span>
                  </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 border border-line-2 rounded-md">
                    <span class="w-1 h-3 bg-blue-500 rounded-full"></span>
                    <span class="font-medium text-[13px] text-foreground">
                      Importing
                    </span>
                  </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 border border-line-2 rounded-md">
                    <span class="w-1 h-3 bg-red-500 rounded-full"></span>
                    <span class="font-medium text-[13px] text-foreground">
                      Attention
                    </span>
                  </div>

<div class="flex items-center gap-x-1.5 py-0.5 px-2 border border-line-2 rounded-md">
                    <span class="w-1 h-3 bg-orange-500 rounded-full"></span>
                    <span class="font-medium text-[13px] text-foreground">
                      Warning
                    </span>
                  </div>
                </div>

Status Badges

Status Badges with Tooltip Pro

Neutral Status Badges Pro

Soft Status Badges Pro

Outlined Status Badges Pro