Brickslab.

@brickslab/ui-web

Indicateur compact non-interactif pour statuts, compteurs ou labels. Disponible en 5 variantes, 3 tailles, mode dot (point coloré) et mode outlined. Complémentaire de TagChip (cliquable) et StatusLabel (avec icône).

Variantes

default · info · success · warning · error

DefaultInfoSuccessWarningError

Tailles

sm · md (défaut) · lg

sm
DefaultInfoSuccessWarningError
md
DefaultInfoSuccessWarningError
lg
DefaultInfoSuccessWarningError

Outlined

fond transparent — bordure + texte colorés

DefaultInfoSuccessWarningError

Dot

indicateur point sans texte — toutes variantes, toutes tailles

variantes
tailles
outlined

Nombre avec max

prop max — tronque les compteurs élevés

children=5, max=995
children=99, max=9999
children=120, max=9999+
children=1234, max=999999+

Usage contextuel

Badge positionné sur un élément UI — compteur de notifications

Notifications7
Messages42
StatutEn ligne
NouveauBêta

Props

PropTypeDéfautRequisDescription
childrenReact.ReactNode——Contenu du badge — texte ou nombre. Ignoré si dot=true.
variant"default" | "info" | "success" | "warning" | "error""default"—Variante colorée du badge.
size"sm" | "md" | "lg""md"—Taille du badge (typographie + padding).
dotbooleanfalse—Mode point — affiche un indicateur circulaire sans texte.
outlinedbooleanfalse—Fond transparent, couleur appliquée uniquement à la bordure et au texte.
maxnumber——Si children (nombre) dépasse max, affiche "max+". Ex: max=99 avec children=120 → "99+".

Utilisation

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

// Variantes
<Badge>Default</Badge>
<Badge variant="info">Info</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="error">Error</Badge>

// Tailles
<Badge size="sm" variant="info">Petit</Badge>
<Badge size="md" variant="info">Moyen</Badge>
<Badge size="lg" variant="info">Grand</Badge>

// Outlined
<Badge variant="success" outlined>Outlined</Badge>

// Dot
<Badge variant="error" dot />

// Nombre avec max
<Badge variant="error" max={99}>{120}</Badge>
// → affiche "99+"

// Contenu texte
<Badge variant="info">Nouveau</Badge>