Étiquette

وسمTag

Stablesrc/dsm/components/tag.tsx

Une petite étiquette en pilule, utilisée seule, en lien, comme filtre activable (`selectable`) ou comme critère amovible (`dismissible`) dans une liste de filtres actifs.

Import

import { Tag } from "@/dsm/components/tag";

Exemples

Étiquettes simples

Avec ou sans icône, en lien.

LTR

État civilRabatVoir toutes les démarches

Filtres à bascule

Un groupe d'étiquettes activables, à l'état contrôlé.

LTR

Filtres actifs

Des critères déjà appliqués, que l'on peut retirer un par un.

LTR

Filtres actifs

Région : Rabat-Salé-KénitraStatut : En ligneCoût : Gratuit

Usage

Quand l'utiliser

Utilisez une étiquette `selectable` pour un filtre à bascule (catégorie, statut) dans une barre de filtres.
Utilisez `dismissible` pour représenter un filtre déjà appliqué, que l'utilisateur peut retirer d'un geste.
Passez `href` pour une étiquette qui mène vers une page de résultats filtrés déjà connue à l'avance.

Quand ne pas l'utiliser

N'utilisez pas d'étiquette pour un simple statut non interactif : préférez `Badge`.
Ne combinez pas `selectable` et `dismissible` sur la même étiquette : ce sont deux usages distincts (filtre à bascule ou critère déjà actif).

Accessibilité & langues

Accessibilité

Une étiquette `selectable` est un vrai bouton avec `aria-pressed`, et affiche une coche lorsqu'elle est activée.
Le bouton de suppression d'une étiquette `dismissible` porte un `aria-label` traduit (« Retirer »), jamais une simple croix muette.

RTL & multilingue

La coche et la croix ont un sens fixe et ne se retournent jamais ; seul leur emplacement (fin de ligne) suit le sens de lecture grâce aux marges logiques.

Propriétés

Tag

Propriété	Type	Défaut	Description
children*	ReactNode	—	Libellé de l'étiquette.
size	"sm" \| "md"	md	Taille de l'étiquette.
icon	ReactNode	—	Icône affichée avant le libellé (ignorée si l'étiquette est activée).
href	string	—	Transforme l'étiquette en lien.
selectable	boolean	—	Rend l'étiquette activable (bouton à bascule).
pressed	boolean	—	État activé, en mode `selectable` contrôlé.
onPressedChange	(pressed: boolean) => void	—	Appelé au changement d'état, en mode `selectable`.
dismissible	boolean	—	Ajoute un bouton de suppression.
onDismiss	() => void	—	Appelé au clic sur le bouton de suppression.

TagGroup

Propriété	Type	Défaut	Description
className	string	—	Conteneur avec retour à la ligne automatique et espacement constant.

Composants liés

Badge