Badge Badge
Introduction
Le composant Badge est un petit élément visuel polyvalent utilisé pour étiqueter, catégoriser ou mettre en évidence les métadonnées de contenu. Il est couramment utilisé pour afficher des statuts (tels que « Succès » ou « En attente »), des étiquettes ou des compteurs numériques.
Via le CMS Page Builder, les auteurs de contenu peuvent rapidement configurer les variantes, tailles et palettes de couleurs des badges pour s'adapter parfaitement à leurs directives de mise en page.
Utilisation
Vous pouvez personnaliser l'apparence des badges à l'aide de styles visuels, de couleurs personnalisées et de tailles responsives.
Variantes de style
Le composant prend en charge plusieurs styles d'affichage visuel pour aider à établir la hiérarchie visuelle.
{
"type": "badge",
"text": "New Feature",
"variant": "solid",
"colorPalette": "blue"
}
Palettes de couleurs
Choisissez parmi une large gamme de couleurs d'accentuation de thème pour indiquer des significations sémantiques.
{
"type": "badge",
"text": "Error Detected",
"variant": "solid",
"colorPalette": "red"
}
Options de taille
Faites évoluer vos badges des pilules de métadonnées compactes aux étiquettes de callout plus grandes.
{
"type": "badge",
"text": "Large Label",
"size": "lg",
"colorPalette": "blue",
"variant": "subtle"
}
Propriétés
Lors de l'ajout d'un bloc badge dans le schéma du Page Builder (content/pages/*.json), les paramètres de configuration suivants sont disponibles :
| Parameter | Type | Default | Description |
|---|---|---|---|
type | String | - | L'identifiant du bloc. Doit être défini sur "badge". |
text | String | - | Le contenu de l'étiquette texte rendu à l'intérieur du badge. |
variant | Select | "subtle" | Le traitement de style visuel. Options : "solid", "subtle", "surface", "outline". |
colorPalette | Select | "green" | Accent de couleur thématique sémantique. Options : "blue", "green", "red", "purple", "orange", "amber", "cyan", "slate", "gray". |
size | Select | "md" | Les dimensions physiques du badge. Options : "sm", "md", "lg", "xl", "2xl". |
class | String | - | Remplacements de classe CSS personnalisés appliqués directement au badge. |