Brickslab.Toolsv2.1.1

@brickslab./ui-web

Étiquette compacte utilisée pour catégoriser ou annoter du contenu. Disponible en 3 variantes visuelles et 2 tailles. Idéal pour les tags de projets, catégories d'articles ou filtres.

Aperçu

variant

variant="default"BricksLab
variant="brand"BricksLab
variant="muted"BricksLab

size

size="sm"Design System
size="md"Design System

toutes les combinaisons variant × size

default / smTag
default / mdTag
brand / smTag
brand / mdTag
muted / smTag
muted / mdTag

Props

PropTypeDéfautRequisDescription
labelstring—✓Texte affiché dans le chip.
variant"default" | "brand" | "muted""default"—Style visuel du chip. "default" → style neutre, "brand" → couleur de marque, "muted" → style atténué.
size"sm" | "md""md"—Taille du chip. Affecte le padding et la taille de police.
Override rapide

Tous les paramètres listés dans cette table sont overrideables via les props. Utilisez ce squelette comme point de départ.

<MyComponent
  label="..."
  variant="default"
  size="md"
/>
labelvariantsize

Utilisation

tsx
import { TagChip } from "@brickslab./ui-web";

// Variantes
<TagChip label="Design System" variant="default" />
<TagChip label="BricksLab"     variant="brand" />
<TagChip label="Archivé"       variant="muted" />

// Tailles
<TagChip label="Tag petit"  size="sm" />
<TagChip label="Tag moyen"  size="md" />

// Combinaisons
<TagChip label="Next.js"   variant="brand" size="sm" />
<TagChip label="TypeScript" variant="default" size="md" />