---
title: "Tag"
type: component
version: "2.2.1"
doc_version: "2.4.3"
status: stable
date: 2026-04-22
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Tag for content labels, categories, and filters. Multiple sizes, colors, and shapes for skill lists, article metadata, and product attributes."
url: https://frutjam.com/components/tag
---

# Tag Component

 Tag components display small, labeled pieces of information, used for categorizing, filtering, or labeling content. Built with semantic HTML and flexible styling, tags help users quickly identify content type, status, or category. The Frutjam tag system supports multiple sizes, colors, styles, and shapes—ideal for skill lists, article categories, status labels, and content metadata.

| Class         | Type     | Description                                          |
| ------------- | -------- | ---------------------------------------------------- |
| tag           | Base     | Inline label for categorizing or identifying content |
| tag-outline   | Style    | Transparent fill with a colored border               |
| tag-soft      | Style    | Muted tinted background                              |
| tag-square    | Style    | Slight rounding (less than default pill)             |
| tag-remove    | Modifier | Dismiss/remove button inside the tag                 |
| tag-xs        | Size     | Extra small (0.6875rem font)                         |
| tag-sm        | Size     | Small (0.75rem font)                                 |
| tag-md        | Size     | Medium (0.8125rem font, default)                     |
| tag-lg        | Size     | Large (0.9375rem font)                               |
| tag-xl        | Size     | Extra large (1rem font)                              |
| tag-primary   | Color    | Primary theme color                                  |
| tag-secondary | Color    | Secondary theme color                                |
| tag-accent    | Color    | Accent theme color                                   |
| tag-neutral   | Color    | Neutral theme color                                  |
| tag-info      | Color    | Info semantic color                                  |
| tag-success   | Color    | Success semantic color                               |
| tag-warning   | Color    | Warning semantic color                               |
| tag-error     | Color    | Error semantic color                                 |

## Basic Usage

## Tag Sizes

```html
<div class="tag tag-xs">Extra Small</div>
<div class="tag tag-sm">Small</div>
<div class="tag tag-md">Medium</div>
<div class="tag tag-lg">Large</div>
```


## Tag Colors

```html
<div class="tag">Default</div>
<div class="tag tag-primary">Primary</div>
<div class="tag tag-secondary">Secondary</div>
<div class="tag tag-accent">Accent</div>
<div class="tag tag-info">Info</div>
<div class="tag tag-success">Success</div>
<div class="tag tag-warning">Warning</div>
<div class="tag tag-error">Error</div>
```


## Tag Styles

```html
<div class="tag tag-primary">Default</div>
<div class="tag tag-primary tag-outline">Outline</div>
<div class="tag tag-secondary tag-soft">Soft</div>
<div class="tag tag-accent tag-dashed">Dashed</div>
```


## Tag Shapes

```html
<div class="tag">Square</div>
<div class="tag tag-rounded">Rounded</div>
<div class="tag tag-pill">Pill</div>
<div class="tag tag-circle">C</div>
```


## Tag with Icon

```html
<div class="tag tag-primary">
  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg>
  Starred
</div>
```


## Closeable Tags

```html
<div class="tag tag-primary">
  JavaScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-secondary">
  React
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-accent">
  TypeScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>
```


## Tag List

```html
<div class="flex flex-wrap gap-2">
  <div class="tag">JavaScript</div>
  <div class="tag tag-primary">React</div>
  <div class="tag tag-secondary">CSS</div>
  <div class="tag tag-accent">UI Design</div>
  <div class="tag tag-info">Frontend</div>
  <div class="tag tag-success">Production</div>
</div>
```