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.

MDX

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" />

Markdoc

- {% 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.

MDX

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" />

Markdoc

- {% 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é.

MDX

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

<Badge text="Personnalisé" variant="success" style={{ fontStyle: 'italic' }} />

Markdoc

{% badge text="Personnalisé" variant="success" style="font-style: 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.