Passer au contenu principal
Frutjam logo Frutjam
v2.2.5
Theme

Composant de balise

Dernière mise à jour:

Balise CSS Tailwind (puce) CSS uniquement avec variantes de couleur, style doux et bouton amovible. Tailles xs-lg. WCAG AA accessible, fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

Les composants de balise affichent de petites informations étiquetées, utilisées pour catégoriser, filtrer ou étiqueter le contenu. Construites avec du HTML sémantique et un style flexible, les balises aident les utilisateurs à identifier rapidement le type, le statut ou la catégorie de contenu. Le système de balises Frutjam prend en charge plusieurs tailles, couleurs, styles et formes, idéal pour les listes de compétences, les catégories d'articles, les étiquettes de statut et les métadonnées de contenu.

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
tagBaseInline label for categorizing or identifying content
tag-outlineStyleRemplissage transparent avec une bordure colorée
tag-softStyleFond teinté en sourdine
tag-squareStyleSlight rounding (less than default pill)
tag-removeModificateurDismiss/remove button inside the tag
tag-xsTailleExtra small (0.6875rem font)
tag-smTailleSmall (0.75rem font)
tag-mdTailleMedium (0.8125rem font, default)
tag-lgTailleLarge (0.9375rem font)
tag-xlTailleExtra large (1rem font)
tag-primaryCouleurCouleur du thème principal
tag-secondaryCouleurCouleur du thème secondaire
tag-accentCouleurCouleur du thème d'accentuation
tag-neutralCouleurCouleur du thème neutre
tag-infoCouleurCouleur sémantique de l'information
tag-successCouleurCouleur sémantique du succès
tag-warningCouleurCouleur sémantique d’avertissement
tag-errorCouleurCouleur 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>

Vous utilisez Claude Code, Cursor ou un autre éditeur d'IA ?

Cherry MCP donne à votre éditeur d'IA les noms et la structure exacts des classes Étiqueter sur demande. Fini les cours hallucinés.

Essayez Cherry MCP