---
title: Callouts
description: >-
  Erfahre, wie du Note-, Tip-, Warning-, Danger-, Check- und benutzerdefinierte
  Callout-Komponenten verwendest, um wichtige Informationen hervorzuheben.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Verwende Callouts, um wichtigen Kontext wie Warnungen, Tipps oder Anforderungen hervorzuheben, ohne den Lesefluss zu unterbrechen.

## Verfügbare Callouts

<Note>
**Note** – Hilfreicher Kontext oder zusätzliche Informationen. Verwende diese Option für Tipps, die das Verständnis verbessern.
</Note>

<Info>
**Info** – Neutrale Informationen oder Fakten. Verwende diese Option für ergänzende Details.
</Info>

<Tip>
**Tip** – Bewährte Vorgehensweisen oder Optimierungen. Verwende diese Option für „Profi-Tipps“, die das Nutzungserlebnis verbessern.
</Tip>

<Warning>
**Warning** – Wichtige Einschränkungen oder Anforderungen. Verwende diese Option, wenn das Ignorieren zu Problemen führen könnte.
</Warning>

<Danger>
**Danger** – Kritische Warnungen. Verwende diese Option für Aktionen, die zu Datenverlust oder Sicherheitsproblemen führen könnten.
</Danger>

<Check>
**Check** – Bestätigungen erfolgreicher Vorgänge. Verwende diese Option, um korrektes Verhalten oder einen erfolgreichen Abschluss zu bestätigen.
</Check>

## Verwendung

```mdx
<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:

```mdx
<Note title="Did you know?">
You can use **Markdown** inside callouts, including `code` and [links](/introduction).
</Note>
```

<Note title="Wusstest du schon?">
Du kannst **Markdown** in Callouts verwenden, einschließlich `code` und [Links](/de/components/card).
</Note>

## Mit Codeblöcken

Callouts können Code enthalten:

<Warning title="Breaking Change in v2.0">
Die Signatur der Funktion `getData()` wurde geändert:

```javascript
// Before (v1.x)
getData(id)

// After (v2.0)
getData({ id, options })
```
</Warning>

## Best Practices

<AccordionGroup>
  <Accordion title="Sparsam verwenden" icon="hand" defaultOpen>
    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.
  </Accordion>

  <Accordion title="Den richtigen Typ auswählen" icon="list-check">
    | Szenario | Callout |
    |----------|---------|
    | Hilfreicher Tipp | `<Tip>` |
    | Zusätzlicher Kontext | `<Note>` oder `<Info>` |
    | Mögliche Stolperfalle | `<Warning>` |
    | Unumkehrbare Aktion | `<Danger>` |
    | Bestätigung | `<Check>` |
    | Benutzerdefiniertes Branding | `<Callout>` |
  </Accordion>

  <Accordion title="Kurz halten" icon="text-width">
    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
  </Accordion>

  <Accordion title="Gezielt positionieren" icon="arrows-up-down">
    Platziere Callouts:
    - **Vor** Code mit Anforderungen
    - **Nach** Anweisungen mit wichtigen Einschränkungen
    - **In der Nähe** des Inhalts, auf den sie sich beziehen
  </Accordion>
</AccordionGroup>

## Props

Alle Callouts akzeptieren dieselben Eigenschaften:

<ParamField name="title" type="string">
  Benutzerdefinierter Titel (ersetzt den Standardtitel).
</ParamField>

## 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:

<Callout icon="key" color="#FFC107">
**Custom** – Verwende ein beliebiges Symbol und eine beliebige Farbe, die zu deinem Inhalt passen.
</Callout>

<Callout icon="rocket" color="#9333EA">
Stelle deine Änderungen mit Vertrauen über unsere CI/CD-Pipeline bereit.
</Callout>

<Callout icon="regular/star" color="#EC4899">
Verwende Präfixe für Symbolstile wie `regular/`, `light/` oder `duotone/` für unterschiedliche Gewichtungen.
</Callout>

### Verwendung benutzerdefinierter Callouts

```mdx
<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

<ParamField name="icon" type="string" default="circle-info">
  Symbolname (siehe [Symbole](/de/content/icons)).
</ParamField>

<ParamField name="color" type="string">
  Hex-Farbcode (z. B. `#FFC107`). Standardmäßig wird die Akzentfarbe verwendet.
</ParamField>

**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 Symbole
- `light/` – Dünn umrandete Symbole
- `duotone/` – Zweifarbige Symbole

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Übersicht der Komponenten" icon="puzzle-piece" href="/de/components/overview">
    Alle verfügbaren Komponenten durchsuchen
  </Card>
  <Card title="MDX-Grundlagen" icon="file-code" href="/de/content/mdx-basics">
    Erfahre, wie du Komponenten in MDX verwendest
  </Card>
</Columns>