tag component

Drop-in semantic component. See examples, sizes, variants, and source.

Compact pill for labels, categories, filters, and selections. Drop a tag on any inline element; group multiple tags in a tags container so they share size and color. Adjective modifiers cover style (outline / basic), shape (circular / square), and behavior (clickable / checkable).

Basic Tags

Default Tags

Default Tag Another Tag Third Tag

<div class="tags">
  <span class="tag">Default Tag</span>
  <span class="tag">Another Tag</span>
  <span class="tag">Third Tag</span>
</div>

Size Variations

Tiny Small Default Large Big

<div class="tags">
  <span class="tag xs">Tiny</span>
  <span class="tag sm">Small</span>
  <span class="tag">Default</span>
  <span class="tag xl">Large</span>
  <span class="tag lg">Big</span>
</div>

Tag Colors

Semantic Colors

Primary Positive Negative Warning Info

<div class="tags">
  <span class="tag primary">Primary</span>
  <span class="tag positive">Positive</span>
  <span class="tag negative">Negative</span>
  <span class="tag warning">Warning</span>
  <span class="tag info">Info</span>
</div>

Extended Color Palette

Red Orange Yellow Olive Green Teal

Blue Violet Purple Pink Brown Grey Black

<div class="stack compact">
  <div class="tags">
    <span class="tag red">Red</span>
    <span class="tag orange">Orange</span>
    <span class="tag yellow">Yellow</span>
    <span class="tag olive">Olive</span>
    <span class="tag green">Green</span>
    <span class="tag teal">Teal</span>
  </div>
  <div class="tags">
    <span class="tag blue">Blue</span>
    <span class="tag violet">Violet</span>
    <span class="tag purple">Purple</span>
    <span class="tag pink">Pink</span>
    <span class="tag brown">Brown</span>
    <span class="tag grey">Grey</span>
    <span class="tag black">Black</span>
  </div>
</div>

Style Variations

Outline Style

Default Outline Primary Outline Positive Outline Negative Outline Warning Outline Info Outline

<div class="tags">
  <span class="tag outline">Default Outline</span>
  <span class="tag outline primary">Primary Outline</span>
  <span class="tag outline positive">Positive Outline</span>
  <span class="tag outline negative">Negative Outline</span>
  <span class="tag outline warning">Warning Outline</span>
  <span class="tag outline info">Info Outline</span>
</div>

Basic Style (Minimal)

Basic Tag Primary Basic Positive Basic Negative Basic

<div class="tags">
  <span class="tag basic">Basic Tag</span>
  <span class="tag basic primary">Primary Basic</span>
  <span class="tag basic positive">Positive Basic</span>
  <span class="tag basic negative">Negative Basic</span>
</div>

Shape Variations

Default Circular Square

<div class="tags">
  <span class="tag">Default</span>
  <span class="tag circular primary">Circular</span>
  <span class="tag square positive">Square</span>
</div>

Interactive Tags

Closable Tags

Removable Delete Me Remove

<div class="tags">
  <span class="tag">
    Removable
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
  <span class="tag primary">
    Delete Me
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
  <span class="tag positive">
    Remove
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
</div>

<div class="tags">
  <span class="tag">
    Removable
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
  <span class="tag primary">
    Delete Me
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
  <span class="tag positive">
    Remove
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
</div>

Clickable Tags

Click Me Interactive Hover Effect Action Tag

<div class="tags">
  <span class="tag clickable">Click Me</span>
  <span class="tag clickable primary">Interactive</span>
  <span class="tag clickable positive">Hover Effect</span>
  <span class="tag clickable warning">Action Tag</span>
</div>

Checkable Tags (Toggle Selection)

JavaScript Python React Vue Angular

<div class="tags">
  <span class="tag checkable">JavaScript</span>
  <span class="tag checkable checked">Python</span>
  <span class="tag checkable">React</span>
  <span class="tag checkable checked">Vue</span>
  <span class="tag checkable">Angular</span>
</div>

Tags with Icons & Avatars

Tags with Icons

Featured Verified Delete Warning Information

<div class="tags">
  <span class="tag primary">
    <i class="icon star w-4 h-4"></i>
    Featured
  </span>
  <span class="tag positive">
    <i class="icon check w-4 h-4"></i>
    Verified
  </span>
  <span class="tag negative">
    <i class="icon trash w-4 h-4"></i>
    Delete
  </span>
  <span class="tag warning">
    <i class="icon triangle-alert w-4 h-4"></i>
    Warning
  </span>
  <span class="tag info">
    <i class="icon info w-4 h-4"></i>
    Information
  </span>
</div>

Tags with Avatars

John Doe

Jane Smith

Mike Johnson

<div class="tags">
  <span class="tag">
    <img src="https://i.pravatar.cc/150?img=1" class="avatar" alt="User" />
    John Doe
  </span>
  <span class="tag">
    <img src="https://i.pravatar.cc/150?img=2" class="avatar" alt="User" />
    Jane Smith
  </span>
  <span class="tag">
    <img src="https://i.pravatar.cc/150?img=3" class="avatar" alt="User" />
    Mike Johnson
  </span>
</div>

Special Tag Styles

Ribbon Style

Left Ribbon Right Ribbon Sale New

<div class="tags">
  <span class="tag ribbon primary">Left Ribbon</span>
  <span class="tag ribbon right positive">Right Ribbon</span>
  <span class="tag ribbon negative">Sale</span>
  <span class="tag ribbon right warning">New</span>
</div>

Pointing Tags

Points Above Points Below Points Left Points Right

<div class="flex gap-4 flex-wrap">
  <span class="tag pointing above">Points Above</span>
  <span class="tag pointing below primary">Points Below</span>
  <span class="tag pointing left positive">Points Left</span>
  <span class="tag pointing right negative">Points Right</span>
</div>

Connected Tags

First Second Third

Connected Group Tags

<div class="stack">
  <div class="tags connected">
    <span class="tag">First</span>
    <span class="tag primary">Second</span>
    <span class="tag">Third</span>
  </div>

  <div class="tags connected positive">
    <span class="tag">Connected</span>
    <span class="tag">Group</span>
    <span class="tag">Tags</span>
  </div>
</div>

Tag Input Field

Dynamic Tag Creation

Type and press Enter or comma to create tags. Use Backspace to remove.

Sample Tags

Blue Theme

<div class="stack">
  <p class="text-sm text-gray-600">
    Type and press Enter or comma to create tags. Use Backspace to remove.
  </p>

  <div
    class="tag-input tags border border-gray-300 rounded-lg p-2 flex flex-wrap gap-2 min-h-[40px]"
    data-unique="true"
  >
    <span class="tag animated">Sample</span>
    <span class="tag animated">Tags</span>
    <input
      type="text"
      placeholder="Add tag..."
      class="flex-1 min-w-[100px] bg-transparent border-none outline-none px-2 py-1 text-sm"
    />
  </div>

  <div
    class="tag-input tags primary border border-blue-300 rounded-lg p-2 flex flex-wrap gap-2 min-h-[40px]"
  >
    <span class="tag">Blue</span>
    <span class="tag">Theme</span>
    <input
      type="text"
      placeholder="Add tag..."
      class="flex-1 min-w-[100px] bg-transparent border-none outline-none px-2 py-1 text-sm"
    />
  </div>
</div>

Container Inheritance

Size Inheritance

All Are Tiny

All Are Small

All Are Large

All Are Big

<div class="space-y-3">
  <div class="tags xs">
    <span class="tag">All</span>
    <span class="tag">Are</span>
    <span class="tag">Tiny</span>
  </div>

  <div class="tags sm">
    <span class="tag">All</span>
    <span class="tag">Are</span>
    <span class="tag">Small</span>
  </div>

  <div class="tags xl">
    <span class="tag">All</span>
    <span class="tag">Are</span>
    <span class="tag">Large</span>
  </div>

  <div class="tags lg">
    <span class="tag">All</span>
    <span class="tag">Are</span>
    <span class="tag">Big</span>
  </div>
</div>

Color Inheritance

All Primary Tags

All Positive Tags

All Negative Tags

<div class="space-y-3">
  <div class="tags primary">
    <span class="tag">All</span>
    <span class="tag">Primary</span>
    <span class="tag">Tags</span>
  </div>

  <div class="tags positive">
    <span class="tag">All</span>
    <span class="tag">Positive</span>
    <span class="tag">Tags</span>
  </div>

  <div class="tags negative">
    <span class="tag">All</span>
    <span class="tag">Negative</span>
    <span class="tag">Tags</span>
  </div>
</div>

Combined Size & Color Inheritance

Tiny Primary Tags

Small Positive Tags

Large Negative Tags

Big Warning Tags

<div class="space-y-3">
  <div class="tags xs primary">
    <span class="tag">Tiny</span>
    <span class="tag">Primary</span>
    <span class="tag">Tags</span>
  </div>

  <div class="tags sm positive">
    <span class="tag">Small</span>
    <span class="tag">Positive</span>
    <span class="tag">Tags</span>
  </div>

  <div class="tags xl negative">
    <span class="tag">Large</span>
    <span class="tag">Negative</span>
    <span class="tag">Tags</span>
  </div>

  <div class="tags lg warning">
    <span class="tag">Big</span>
    <span class="tag">Warning</span>
    <span class="tag">Tags</span>
  </div>
</div>

Individual Overrides

Default Override Color Override Size Override Both Default

<div class="tags sm primary">
  <span class="tag">Default</span>
  <span class="tag positive">Override Color</span>
  <span class="tag xl">Override Size</span>
  <span class="tag negative lg">Override Both</span>
  <span class="tag">Default</span>
</div>

Common Use Cases

Category Tags

Technology Design Marketing Business Development

<div class="tags circular">
  <span class="tag">Technology</span>
  <span class="tag">Design</span>
  <span class="tag">Marketing</span>
  <span class="tag">Business</span>
  <span class="tag">Development</span>
</div>

Status Indicators

Active Pending Expired Draft Archived

<div class="tags sm">
  <span class="tag positive">Active</span>
  <span class="tag warning">Pending</span>
  <span class="tag negative">Expired</span>
  <span class="tag info">Draft</span>
  <span class="tag">Archived</span>
</div>

Applied Filters

Price: $100-$500 Brand: Apple In Stock

<div class="tags outline">
  <span class="tag">
    Price: $100-$500
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
  <span class="tag">
    Brand: Apple
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
  <span class="tag">
    In Stock
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
</div>

<div class="tags outline">
  <span class="tag">
    Price: $100-$500
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
  <span class="tag">
    Brand: Apple
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
  <span class="tag">
    In Stock
    <span class="close">
      <svg fill="currentColor" viewBox="0 0 20 20">
        <path
          fill-rule="evenodd"
          d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
          clip-rule="evenodd"
        ></path>
      </svg>
    </span>
  </span>
</div>

User Tags

Admin

Editor

Viewer

Guest

<div class="tags">
  <span class="tag">
    <img src="https://i.pravatar.cc/150?img=3" class="avatar" alt="Admin" />
    Admin
  </span>
  <span class="tag">
    <img src="https://i.pravatar.cc/150?img=4" class="avatar" alt="Editor" />
    Editor
  </span>
  <span class="tag">
    <img src="https://i.pravatar.cc/150?img=5" class="avatar" alt="Viewer" />
    Viewer
  </span>
  <span class="tag">
    <img src="https://i.pravatar.cc/150?img=6" class="avatar" alt="Guest" />
    Guest
  </span>
</div>

Skills & Technologies

Frontend

HTML5 CSS3 JavaScript React Vue.js Angular

Backend

Node.js Python Java PHP Ruby Go

Databases

MySQL PostgreSQL MongoDB Redis Firebase

<div class="space-y-3">
  <h5 class="text-sm font-medium text-gray-600">Frontend</h5>
  <div class="tags sm outline blue">
    <span class="tag">HTML5</span>
    <span class="tag">CSS3</span>
    <span class="tag">JavaScript</span>
    <span class="tag">React</span>
    <span class="tag">Vue.js</span>
    <span class="tag">Angular</span>
  </div>

  <h5 class="text-sm font-medium text-gray-600">Backend</h5>
  <div class="tags sm outline green">
    <span class="tag">Node.js</span>
    <span class="tag">Python</span>
    <span class="tag">Java</span>
    <span class="tag">PHP</span>
    <span class="tag">Ruby</span>
    <span class="tag">Go</span>
  </div>

  <h5 class="text-sm font-medium text-gray-600">Databases</h5>
  <div class="tags sm outline purple">
    <span class="tag">MySQL</span>
    <span class="tag">PostgreSQL</span>
    <span class="tag">MongoDB</span>
    <span class="tag">Redis</span>
    <span class="tag">Firebase</span>
  </div>
</div>

Class API Reference

Type	Class	Usage	Notes
Base	`tag`	Required base class	Always required
	`tags`	Container for multiple tags	Children inherit size and color
	`tag-input`	Tag editor with text input	Combine with `tags`
Sizes	`xs`	Tiny	Modifier on `tag` or `tags`
	`sm`	Small	Modifier on `tag` or `tags`
	(default)	Medium	No size class needed
	`xl`	Large	Modifier on `tag` or `tags`
	`lg`	Big	Modifier on `tag` or `tags`
Variants	`outline`	Border only, no fill	Modifier on `tag`
	`basic`	Minimal — no background, no border	Modifier on `tag`
	`circular` / `round`	Pill shape	Modifier on `tag`
	`square`	No rounded corners	Modifier on `tag`
	`ribbon`	Ribbon-style tag	Combine with `right` for right-pointing
	`pointing`	Has a small arrow on one side	Combine with `above`/`below`/`left`/`right`
Intents	`primary`	Blue intent	Modifier on `tag` or `tags`
	`positive` / `success`	Green intent	Modifier on `tag` or `tags`
	`negative` / `error`	Red intent	Modifier on `tag` or `tags`
	`warning`	Yellow intent	Modifier on `tag` or `tags`
	`info`	Lighter-blue intent	Modifier on `tag` or `tags`
Extended Palette	`red` / `orange` / `yellow` / `olive` / `green` / `teal` / `blue` / `violet` / `purple` / `pink` / `brown` / `grey` / `black`	Direct palette colors	Use intents (primary/positive/...) when possible
States	`clickable`	Cursor + hover lift	Modifier on `tag`
	`checkable`	Toggle selectable tag	Modifier on `tag`
	`checked`	Selected appearance for a checkable tag	Combine with `checkable`
	`animated`	Fade-in on insertion	Modifier on `tag`
	`loading`	Spinner suffix, dim opacity	Modifier on `tag`
	`disabled`	Dim + non-interactive	Modifier on `tag`
Layout	`connected`	Glues tags together with no gap	Modifier on `tags`
Layout	`floating`	Absolute-positioned badge	Modifier on `tag`
Children	`icon`	Leading icon child	Inside `tag`
	`avatar`	Leading avatar image child	Inside `tag`
	`close`	Trailing × button	Inside `tag`