Tag

⌘

Indicator with label, optionally as a part of a set

Overview

A tag is an unobtrusive label used to categorise or organise items using keywords that describe them. Information such as product updates and tutorials can be tagged with single or multiple labels. Tags can be linked to filter category types.

Default

Themes

<span className="py-1 px-2 border-transparent rounded-full font-medium text-gray-400 bg-gray-100 dark:bg-gray-800">Themes</span>

Sizes

Small Normal

<span className="py-1 px-2 leading-5 border-transparent rounded-full text-sm font-medium text-gray-400 bg-gray-100 dark:bg-gray-800">Small</span>

<span className="py-1 px-2 leading-5 border-transparent rounded-full font-medium text-gray-400 bg-gray-100 dark:bg-gray-800">Normal</span>

Tones

Default Blue

<span className="py-1 px-2 leading-5 border-transparent rounded-full font-medium text-gray-400 bg-gray-100 dark:bg-gray-800">Default</span>

<span className="py-1 px-2 leading-5 border-transparent rounded-full font-medium bg-blue-200 text-blue-500">Blue</span>

Link

Filter tag

<a href="#" className="py-1 px-2 leading-5 border-transparent rounded-full font-medium text-gray-400 bg-gray-100 dark:bg-gray-800 hover:bg-gray-200 dark:hover:bg-gray-700 ease-in-out duration-200">
  <span>Filter tag</span>
</a>