Components

Tailwind CSS Indicators

As the name suggests, indicators are versatile elements to display different types of information in a visually meaningful way.

image

They are designed to be kept relative to other components like cards or buttons. Indicators are also used to show loading labels, number counts and account status.

Indicators offer a wide range of customisation in terms of sizes, colors, positioning, and styles. Some of the popular indicators are count indicators, loading indicators, progress indicators and status indicators.

Default indicator

Following is the simple indicator which shows different colors which indicate different status or information.

<span class="w-2 h-2 inline-block bg-gray-900 rounded-full mr-2"></span>
      <span class="w-3 h-3 inline-block bg-gray-500 rounded-full mr-2"></span>
      <span class="w-3 h-3 inline-block bg-red-600 rounded-full mr-2"></span>
      <span class="w-3 h-3 inline-block bg-yellow-500 rounded-full mr-2"></span>
      <span class="w-3 h-3 inline-block bg-green-500 rounded-full mr-2"></span>
      <span class="w-3 h-3 inline-block bg-blue-500 rounded-full mr-2"></span>
      <span class="w-3 h-3 inline-block bg-indigo-600 rounded-full mr-2"></span>
      <span class="w-3 h-3 inline-block bg-purple-500 rounded-full mr-2"></span>
      <span class="w-3 h-3 inline-block bg-orange-500 rounded-full mr-2"></span>
      <span class="w-3 h-3 inline-block bg-pink-500 rounded-full mr-2"></span>

Indicator with label

These indicators not only show colors but also display label text.

Dark
Gray
Red
Yellow
Green
Blue
Indigo
Purple
Orange
Pink 
<div class="inline-flex items-center">
      <span class="w-3 h-3 inline-block bg-gray-900 rounded-full mr-2"></span>
      <span class="text-gray-500">Dark</span>
      </div>
      <div class="inline-flex items-center">
      <span class="w-3 h-3 inline-block bg-gray-500 rounded-full mr-2"></span>
      <span class="text-gray-500">Gray</span>
      </div> 
      <div class="inline-flex items-center">
      <span class="w-3 h-3 inline-block bg-red-600 rounded-full mr-2"></span>
      <span class="text-gray-500">Red</span>
      </div>
      <div class="inline-flex items-center">
      <span class="w-3 h-3 inline-block bg-yellow-500 rounded-full mr-2"></span>
      <span class="text-gray-500">Yellow</span>
      </div> 
      <div class="inline-flex items-center">
      <span class="w-3 h-3 inline-block bg-green-500 rounded-full mr-2"></span>
      <span class="text-gray-500">Green</span>
      </div>
      <div class="inline-flex items-center">
      <span class="w-3 h-3 inline-block bg-blue-500 rounded-full mr-2"></span>
      <span class="text-gray-500">Blue</span>
      </div>
      <div class="inline-flex items-center">
      <span class="w-3 h-3 inline-block bg-indigo-600 rounded-full mr-2"></span>
      <span class="text-gray-500">Indigo</span>
      </div>
      <div class="inline-flex items-center">
      <span class="w-3 h-3 inline-block bg-purple-500 rounded-full mr-2"></span>
      <span class="text-gray-500">Purple</span>
      </div>
      <div class="inline-flex items-center">
      <span class="w-3 h-3 inline-block bg-orange-500 rounded-full mr-2"></span>
      <span class="text-gray-500">Orange</span>
      </div>
      <div class="inline-flex items-center">
      <span class="w-3 h-3 inline-block bg-pink-500 rounded-full mr-2"></span>
      <span class="text-gray-500">Pink</span>
      </div>

Status indicator

Such indicators show different statuses like on and off status, active and inactive, up and down, high and low etc.

Default avatar
Default avatar 
<div class="relative">
      <img class="w-10 h-10 rounded-full" src="https://pagedone.io/asset/uploads/1695619312.png" alt="Default avatar">
      <span class="bottom-0 left-7 absolute  w-3.5 h-3.5 bg-emerald-500 border-2 border-white rounded-full"></span>
      </div>
      <div class="relative">
      <img class="w-10 h-10 rounded-full" src="https://pagedone.io/asset/uploads/1695619312.png" alt="Default avatar">
      <span class="bottom-0 left-7 absolute  w-3.5 h-3.5 bg-gray-300 border-2 border-white rounded-full"></span>
      </div>

Indicator with badge

It is also possible to show indicators with label and status with user image or avatar.

John Deo
Online
John Deo
Offline 
<div class="flex items-center  space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://pagedone.io/asset/uploads/1695619312.png" alt="image
">
      <div class="font-medium">
      <h5 class="text-base font-semibold text-gray-900">John Deo </h5>
      <span class="inline-flex items-center bg-green-100 text-green-500 text-xs font-medium ml-1 px-2 py-0.5 rounded-full">
          <span class="w-1.5 h-1.5 mr-1 bg-green-400 rounded-full"></span>
          Online
      </span>
      </div>
      </div>
      <div class="flex items-center space-x-4">
      <img class="w-10 h-10 rounded-full" src="https://pagedone.io/asset/uploads/1695619312.png" alt="
">
      <div class="font-medium">
      <h5 class="text-base font-semibold text-gray-900">John Deo </h5>
      <span class="inline-flex items-center bg-gray-100 text-gray-500 text-xs font-medium ml-1 px-2 py-0.5 rounded-full">
          <span class="w-1.5 h-1.5 mr-1 bg-gray-400 rounded-full"></span>
          Offline
      </span>
      </div>
      </div>