Callouts
Erfahre, wie du Note-, Tip-, Warning-, Danger-, Check- und benutzerdefinierte Callout-Komponenten verwendest, um wichtige Informationen hervorzuheben.
Verwende Callouts, um wichtigen Kontext wie Warnungen, Tipps oder Anforderungen hervorzuheben, ohne den Lesefluss zu unterbrechen.
Verfügbare Callouts
Note – Hilfreicher Kontext oder zusätzliche Informationen. Verwende diese Option für Tipps, die das Verständnis verbessern.
Info – Neutrale Informationen oder Fakten. Verwende diese Option für ergänzende Details.
Tip – Bewährte Vorgehensweisen oder Optimierungen. Verwende diese Option für „Profi-Tipps“, die das Nutzungserlebnis verbessern.
Warning – Wichtige Einschränkungen oder Anforderungen. Verwende diese Option, wenn das Ignorieren zu Problemen führen könnte.
Danger – Kritische Warnungen. Verwende diese Option für Aktionen, die zu Datenverlust oder Sicherheitsproblemen führen könnten.
Check – Bestätigungen erfolgreicher Vorgänge. Verwende diese Option, um korrektes Verhalten oder einen erfolgreichen Abschluss zu bestätigen.
Verwendung
<Note>
This is helpful context for the reader.
</Note>
<Warning>
This could cause issues if you skip this step.
</Warning>
<Danger>
This action cannot be undone. Proceed with caution.
</Danger>Mit Titeln
Füge jedem Callout einen benutzerdefinierten Titel hinzu:
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>Du kannst Markdown in Callouts verwenden, einschließlich code und Links.
Mit Codeblöcken
Callouts können Code enthalten:
Die Signatur der Funktion getData() wurde geändert:
// Before (v1.x)
getData(id)
// After (v2.0)
getData({ id, options })Best Practices
Zu viele Callouts schwächen ihre Wirkung. Strebe maximal 1–2 pro Seite an.
Verwende Callouts nur für Informationen, die der Leser nicht übersehen darf.
| Szenario | Callout |
|---|---|
| Hilfreicher Tipp | <Tip> |
| Zusätzlicher Kontext | <Note> oder <Info> |
| Mögliche Stolperfalle | <Warning> |
| Unumkehrbare Aktion | <Danger> |
| Bestätigung | <Check> |
| Benutzerdefiniertes Branding | <Callout> |
Callouts sollten schnell erfassbar sein. Wenn du mehrere Absätze benötigst, solltest du stattdessen ein Accordion verwenden.
Gut: Ein oder zwei Sätze Vermeiden: Mehrere Textabsätze
Platziere Callouts:
- Vor Code mit Anforderungen
- Nach Anweisungen mit wichtigen Einschränkungen
- In der Nähe des Inhalts, auf den sie sich beziehen
Props
Alle Callouts akzeptieren dieselben Eigenschaften:
Benutzerdefinierter Titel (ersetzt den Standardtitel).
Barrierefreiheit
Callouts werden mit semantischem HTML und ARIA-Rollen implementiert:
- Screenreader kündigen den Callout-Typ an
- Farbe ist nicht das einzige Unterscheidungsmerkmal (Symbole sind enthalten)
- Ausreichender Farbkontrast in beiden Designs
Benutzerdefinierter Callout
Erstelle Callouts mit benutzerdefinierten Symbolen und Farben mithilfe der Callout-Komponente:
Custom – Verwende ein beliebiges Symbol und eine beliebige Farbe, die zu deinem Inhalt passen.
Stelle deine Änderungen mit Vertrauen über unsere CI/CD-Pipeline bereit.
Verwende Präfixe für Symbolstile wie regular/, light/ oder duotone/ für unterschiedliche Gewichtungen.
Verwendung benutzerdefinierter Callouts
<Callout icon="key" color="#FFC107">
This callout uses a key icon with amber color.
</Callout>
<Callout icon="rocket" color="#9333EA">
This callout uses a rocket icon with purple color.
</Callout>
<Callout icon="regular/star" color="#EC4899">
Use style prefixes for different icon weights.
</Callout>Props benutzerdefinierter Callouts
Symbolname (siehe Symbole).
Hex-Farbcode (z. B. #FFC107). Standardmäßig wird die Akzentfarbe verwendet.
Präfixe für Symbolstile: Füge ein Präfix hinzu, um die Gewichtung des Symbols zu ändern:
solid/– Ausgefüllte Symbole (Standard)regular/– Umrandete Symbolelight/– Dünn umrandete Symboleduotone/– Zweifarbige Symbole