Brickslab.

@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.

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" />