---
title: "Tag"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
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/fr/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.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

| Classe        | Taper        | Description                                          |
| ------------- | ------------ | ---------------------------------------------------- |
| tag           | Base         | Inline label for categorizing or identifying content |
| tag-outline   | Style        | Remplissage transparent avec une bordure colorée     |
| tag-soft      | Style        | Fond teinté en sourdine                              |
| tag-square    | Style        | Slight rounding (less than default pill)             |
| tag-remove    | Modificateur | Dismiss/remove button inside the tag                 |
| tag-xs        | Taille       | Extra small (0.6875rem font)                         |
| tag-sm        | Taille       | Small (0.75rem font)                                 |
| tag-md        | Taille       | Medium (0.8125rem font, default)                     |
| tag-lg        | Taille       | Large (0.9375rem font)                               |
| tag-xl        | Taille       | Extra large (1rem font)                              |
| tag-primary   | Couleur      | Couleur du thème principal                           |
| tag-secondary | Couleur      | Couleur du thème secondaire                          |
| tag-accent    | Couleur      | Couleur du thème d'accentuation                      |
| tag-neutral   | Couleur      | Couleur du thème neutre                              |
| tag-info      | Couleur      | Couleur sémantique de l'information                  |
| tag-success   | Couleur      | Couleur sémantique du succès                         |
| tag-warning   | Couleur      | Couleur sémantique d’avertissement                   |
| tag-error     | Couleur      | Couleur sémantique des erreurs                       |

## Utilisation de base

## 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>
```