Aller au contenu

Badges

Pour afficher de petits éléments d’information, tels qu’un statut ou une étiquette, utilisez le composant <Badge>.

Aperçu
Nouveau

Import

import { Badge } from '@astrojs/starlight/components';

Utilisation

Affichez un badge en utilisant le composant <Badge> et passez le contenu que vous souhaitez afficher à l’attribut text du composant <Badge>.

Par défaut, le badge utilisera la couleur d’accentuation du thème de votre site. Pour utiliser une des couleurs de badge disponibles, définissez l’attribut variant à l’une des valeurs prises en charge.

import { Badge } from '@astrojs/starlight/components';
<Badge text="Note" variant="note" />
<Badge text="Succès" variant="success" />
<Badge text="Astuce" variant="tip" />
<Badge text="Attention" variant="caution" />
<Badge text="Danger" variant="danger" />
Aperçu
Note Succès Astuce Attention Danger

Utiliser différentes tailles

Utilisez l’attribut size pour contrôler la taille du texte du badge.

import { Badge } from '@astrojs/starlight/components';
<Badge text="Nouveau" size="small" />
<Badge text="Nouveau et amélioré" size="medium" />
<Badge text="Nouveau, amélioré et plus grand" size="large" />
Aperçu
Nouveau Nouveau et amélioré Nouveau, amélioré et plus grand

Personnaliser les badges

Personnalisez les badges en utilisant n’importe quel autre attribut de l’élément <span> tel que class ou style avec du CSS personnalisé.

import { Badge } from '@astrojs/starlight/components';
<Badge text="Personnalisé" variant="success" style={{ fontStyle: 'italic' }} />
Aperçu
Personnalisé

Props de <Badge>

Implémentation : Badge.astro

Le composant <Badge> accepte les props suivantes ainsi que tous les autres attributs de l’élément <span> :

text

Obligatoire
Type : string

Le texte à afficher dans le badge.

variant

Type : 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
Par défaut : 'default'

La variante de couleur du badge à utiliser : note (bleu), tip (violet), danger (rouge), caution (orange), success (vert), ou default (couleur d’accentuation du thème).

size

Type : 'small' | 'medium' | 'large'

Définit la taille du badge à afficher.