Badges
Pour afficher de petits éléments d’information, tels qu’un statut ou une étiquette, utilisez le composant <Badge>
.
Import
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.
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" />
{% badge text="Nouveau" size="small" /%}{% badge text="Nouveau et amélioré" size="medium" /%}{% badge text="Nouveau, amélioré et plus grand" size="large" /%}
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' }} />
{% badge text="Personnalisé" variant="success" style="font-style: italic;" /%}
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.