Text
@brickslab/ui-webComposant de texte courant avec 4 variantes typographiques (body-lg, body-md, body-sm, caption). Supporte 3 tons de couleur, l'alignement et des effets visuels avec gestion automatique de l'accessibilité ARIA.
variant — tone: default
variant="body-lg"The quick brown fox
variant="body-md"The quick brown fox
variant="body-sm"The quick brown fox
variant="caption"The quick brown fox
tone — variant: body-md
tone="default"The quick brown fox
tone="muted"The quick brown fox
tone="brand"The quick brown fox
align — variant: body-md
align="left"The quick brown fox jumps
align="center"The quick brown fox jumps
align="right"The quick brown fox jumps
opacity + blurPx (accessibilité automatique)
opacity=0.4Opacité réduite
variant="caption" tone="muted" (aria-hidden)Légende décorative
| Prop | Type | Défaut | Requis | Description |
|---|
texte | string | — | ✓ | Contenu textuel à afficher. |
variant | "body-sm" | "body-md" | "body-lg" | "caption" | "body-sm" | — | Variante typographique. Détermine la balise HTML (p ou span) et la taille/graisse via le token mapping interne. "caption" génère un <span>. |
align | "left" | "center" | "right" | "left" | — | Alignement horizontal du texte. |
tone | "default" | "muted" | "brand" | "default" | — | Couleur du texte. "default" → var(--color-fg), "muted" → var(--color-muted), "brand" → var(--color-brand). |
opacity | number | — | — | Opacité CSS du texte (0–1). Déclenche un aria-label si < 0.3 pour l'accessibilité. |
blurPx | number | — | — | Flou CSS en pixels. Déclenche un aria-label si > 0 pour l'accessibilité. |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Text } from "@brickslab/ui-web";
// Variantes
<Text texte="Corps de texte large" variant="body-lg" />
<Text texte="Corps de texte moyen" variant="body-md" />
<Text texte="Corps de texte petit" variant="body-sm" />
<Text texte="Légende / meta" variant="caption" />
// Tones
<Text texte="Texte par défaut" variant="body-md" tone="default" />
<Text texte="Texte secondaire" variant="body-md" tone="muted" />
<Text texte="Texte brand" variant="body-md" tone="brand" />
// Alignement
<Text texte="Centré" variant="body-md" align="center" />
<Text texte="Droite" variant="body-md" align="right" />
// Effets (avec accessibilité automatique)
<Text texte="Opacité réduite" variant="body-md" opacity={0.4} />
<Text texte="Texte flouté" variant="body-md" blurPx={2} />
// Caption décorative (aria-hidden automatique)
<Text texte="Légende décorative" variant="caption" tone="muted" />
