Components
A component to indicate properties of elements.
A base form of the legend indicator.
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-gray-500 rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Legend indicator</span>
</div>
Predefined solid color legend indicator styles.
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-gray-800 rounded-full mr-2 dark:bg-white"></span>
<span class="text-gray-600 dark:text-gray-400">Dark</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-gray-500 rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Gray</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-red-500 rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Red</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-yellow-500 rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Yellow</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-green-500 rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Green</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-blue-500 rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Blue</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-indigo-500 rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Indigo</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-purple-500 rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Purple</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-pink-500 rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Pink</span>
</div>
<div class="inline-flex items-center">
<span class="w-2 h-2 inline-block bg-white rounded-full mr-2"></span>
<span class="text-gray-600 dark:text-gray-400">Light</span>
</div>