---
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](https://jamdesk.com/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](https://jamdesk.com/docs/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

### Sparsam verwenden

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.

### Den richtigen Typ auswählen

| Szenario | Callout |
|----------|---------|
| Hilfreicher Tipp | `<Tip>` |
| Zusätzlicher Kontext | `<Note>` oder `<Info>` |
| Mögliche Stolperfalle | `<Warning>` |
| Unumkehrbare Aktion | `<Danger>` |
| Bestätigung | `<Check>` |
| Benutzerdefiniertes Branding | `<Callout>` |

### Kurz halten

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

### Gezielt positionieren

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:

<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](https://jamdesk.com/docs/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>