Abzeichen

Um wenige Informationen, wie z. B. einen Status oder eine Kategorie, anzuzeigen, verwende die Komponente <Badge>.

Vorschau

Neu

Import

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

Verwendung

Zeige ein Abzeichen mit der Komponente <Badge> an und übergib den Inhalt, den du anzeigen möchtest, an das Attribut text der Komponente <Badge>.

Standardmäßig wird für das Abzeichen die Akzentfarbe des Themes deiner Website verwendet. Um eine eingebaute Abzeichen-Farbe zu verwenden, setze das Attribut variant auf einen der unterstützten Werte.

MDX

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

- <Badge text="Hinweis" variant="note" />
- <Badge text="Erfolg" variant="success" />
- <Badge text="Tipp" variant="tip" />
- <Badge text="Warnung" variant="caution" />
- <Badge text="Gefahr" variant="danger" />

Markdoc

- {% badge text="Hinweis" variant="note" /%}
- {% badge text="Erfolg" variant="success" /%}
- {% badge text="Tipp" variant="tip" /%}
- {% badge text="Warnung" variant="caution" /%}
- {% badge text="Gefahr" variant="danger" /%}

Vorschau

• Hinweis
• Erfolg
• Tipp
• Warnung
• Gefahr

Verschiedene Größen verwenden

Verwende das Attribut size, um die Größe des Abzeichentextes zu steuern.

MDX

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

- <Badge text="Neu" size="small" />
- <Badge text="Neu und verbessert" size="medium" />
- <Badge text="Neu, verbessert und größer" size="large" />

Markdoc

- {% badge text="Neu" size="small" /%}
- {% badge text="Neu und verbessert" size="medium" /%}
- {% badge text="Neu, verbessert und größer" size="large" /%}

Vorschau

• Neu
• Neu und verbessert
• Neu, verbessert und größer

Abzeichen anpassen

Passe Abzeichen an, indem du andere <span>-Attribute wie class oder style mit benutzerdefiniertem CSS verwendest.

MDX

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

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

Markdoc

{% badge text="Individuell" variant="success" style="font-style: italic;" /%}

Vorschau

Individuell

<Badge>-Eigenschaften

Implementation: Badge.astro

Die <Badge>-Komponente akzeptiert die folgenden Eigenschaften und auch alle anderen <span>-Attribute:

text

Erforderlich
Typ: string

Der Textinhalt, der in dem Abzeichen angezeigt werden soll.

variant

Typ: 'note' | 'danger' | 'success' | 'caution' | 'tip' | 'default'
Standard: 'default'

Die zu verwendende Farbvariante des Abzeichens: note (blau), tip (lila), danger (rot), caution (orange), success (grün) oder default (Akzentfarbe des Themes).

size

Typ: 'small' | 'medium' | 'large'

Bestimmt die Größe des anzuzeigenden Abzeichens.