---
title: Callouts
description: Highlight warnings, tips, and important context without interrupting the reading flow. Six types available.
---

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

Use Callouts to highlight important context like warnings, tips, or requirements without interrupting the flow.

## Available Callouts

<Note>
**Note** - Helpful context or additional information. Use for tips that enhance understanding.
</Note>

<Info>
**Info** - Neutral information or facts. Use for supplementary details.
</Info>

<Tip>
**Tip** - Best practices or optimizations. Use for "pro tips" that improve the experience.
</Tip>

<Warning>
**Warning** - Important caveats or requirements. Use when something could cause issues if ignored.
</Warning>

<Danger>
**Danger** - Critical warnings. Use for actions that could cause data loss or security issues.
</Danger>

<Check>
**Check** - Success confirmations. Use to confirm correct behavior or successful completion.
</Check>

## Usage

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

## With Titles

Add a custom title to any callout:

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

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

## With Code Blocks

Callouts can contain code:

<Warning title="Breaking Change in v2.0">
The `getData()` function signature changed:

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

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

## Best Practices

<AccordionGroup>
  <Accordion title="Use sparingly" icon="hand" defaultOpen>
    Too many callouts dilute their impact. Aim for 1-2 per page maximum.

    If everything is important, nothing is important.
  </Accordion>

  <Accordion title="Choose the right type" icon="list-check">
    | Scenario | Callout |
    |----------|---------|
    | Helpful tip | `<Tip>` |
    | Extra context | `<Note>` or `<Info>` |
    | Potential gotcha | `<Warning>` |
    | Irreversible action | `<Danger>` |
    | Confirmation | `<Check>` |
    | Custom branding | `<Callout>` |
  </Accordion>

  <Accordion title="Keep them concise" icon="text-width">
    Callouts should be scannable. If you need multiple paragraphs, consider using an Accordion instead.

    **Good:** One or two sentences
    **Avoid:** Multiple paragraphs of text
  </Accordion>

  <Accordion title="Position strategically" icon="arrows-up-down">
    Place callouts:
    - **Before** code that has requirements
    - **After** instructions with important caveats
    - **Near** the content they reference
  </Accordion>
</AccordionGroup>

## Props

All callouts accept the same properties:

<ParamField name="title" type="string">
  Custom title (replaces default).
</ParamField>

## Accessibility

Callouts are implemented with semantic HTML and ARIA roles:
- Screen readers announce the callout type
- Color is not the only indicator (icons are included)
- Sufficient color contrast in both themes

## Custom Callout

Create callouts with custom icons and colors using the `Callout` component:

<Callout icon="key" color="#FFC107">
**Custom** - Use any icon and color to match your content.
</Callout>

<Callout icon="rocket" color="#9333EA">
Deploy your changes with confidence using our CI/CD pipeline.
</Callout>

<Callout icon="regular/star" color="#EC4899">
Use icon style prefixes like `regular/`, `light/`, or `duotone/` for different weights.
</Callout>

### Custom Callout Usage

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

### Custom Callout Props

<ParamField name="icon" type="string" default="circle-info">
  Icon name (see [Icons](/content/icons)).
</ParamField>

<ParamField name="color" type="string">
  Hex color code (e.g., `#FFC107`). Defaults to the accent color.
</ParamField>

**Icon style prefixes:** Add a prefix to change the icon weight:
- `solid/` - Filled icons (default)
- `regular/` - Outlined icons
- `light/` - Thin outlined icons
- `duotone/` - Two-tone icons

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>