Tag Component
CSS-only Tailwind CSS tag (chip) with color variants, soft style, and removable button. Sizes xs–lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.
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
Another tag
Third tag
1 2 3 | <div class="tag">Tag</div> <div class="tag">Another tag</div> <div class="tag">Third tag</div> |
1 2 3 | <div className="tag">Tag</div> <div className="tag">Another tag</div> <div className="tag">Third tag</div> |
Tag Sizes
Extra Small
Small
Medium
Large
html
1 2 3 4 | <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
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
html
1 2 3 4 5 6 7 8 | <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
Default
Outline
Soft
Dashed
html
1 2 3 4 | <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
Square
Rounded
Pill
C
html
1 2 3 4 | <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
Starred
html
1 2 3 4 | <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
JavaScript
React
TypeScript
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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
JavaScript
React
CSS
UI Design
Frontend
Production
html
1 2 3 4 5 6 7 8 | <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> |