Skip to main content

Tag

Finder-style color dots for categorisation and labelling.

Selectors

.tag-red
Red color dot.
.tag-orange
Orange color dot.
.tag-yellow
Yellow color dot.
.tag-green
Green color dot.
.tag-blue
Blue color dot.
.tag-purple
Purple color dot.
.tag-gray
Gray color dot.

Default

HTML 
<div class="flex items-center gap-1.5">
  <span class="tag-red" role="img" aria-label="Red"></span>
  <span class="tag-orange" role="img" aria-label="Orange"></span>
  <span class="tag-yellow" role="img" aria-label="Yellow"></span>
  <span class="tag-green" role="img" aria-label="Green"></span>
  <span class="tag-blue" role="img" aria-label="Blue"></span>
  <span class="tag-purple" role="img" aria-label="Purple"></span>
  <span class="tag-gray" role="img" aria-label="Gray"></span>
</div>

With Label

Red Orange Yellow Green Blue Purple Gray
HTML 
<div class="flex flex-col gap-2">
  <span class="flex items-center gap-2 text-sm"><span class="tag-red" aria-hidden="true"></span> Red</span>
  <span class="flex items-center gap-2 text-sm"><span class="tag-orange" aria-hidden="true"></span> Orange</span>
  <span class="flex items-center gap-2 text-sm"><span class="tag-yellow" aria-hidden="true"></span> Yellow</span>
  <span class="flex items-center gap-2 text-sm"><span class="tag-green" aria-hidden="true"></span> Green</span>
  <span class="flex items-center gap-2 text-sm"><span class="tag-blue" aria-hidden="true"></span> Blue</span>
  <span class="flex items-center gap-2 text-sm"><span class="tag-purple" aria-hidden="true"></span> Purple</span>
  <span class="flex items-center gap-2 text-sm"><span class="tag-gray" aria-hidden="true"></span> Gray</span>
</div>

Interactive

HTML 
<div class="flex items-center gap-1.5">
  <button class="tag-red" aria-label="Red"></button>
  <button class="tag-orange" aria-label="Orange"></button>
  <button class="tag-yellow" aria-label="Yellow"></button>
  <button class="tag-green" aria-label="Green"></button>
  <button class="tag-blue" aria-label="Blue"></button>
  <button class="tag-purple" aria-label="Purple"></button>
  <button class="tag-gray" aria-label="Gray"></button>
</div>