> ## Documentation Index
> Fetch the complete documentation index at: https://docs.blode.md/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Callout

Highlight important information with colored alert boxes.

Use the `Callout` component to draw attention to important information. Each callout type has a distinct color to signal its intent.

## Basic usage

Wrap your content in a `<Callout>` with a `type` prop:

```mdx
<Callout type="info">This is an informational callout.</Callout>
```

> [!INFO]
> This is an informational callout.

## Types

There are seven built-in callout types:

> [!NOTE]
> Use **note** for general-purpose annotations.

> [!INFO]
> Use **info** for supplemental context.

> [!TIP]
> Use **tip** for helpful suggestions and best practices.

> [!CHECK]
> Use **check** to confirm a successful outcome.

> [!WARNING]
> Use **warning** when something could cause issues.

> [!DANGER]
> Use **danger** for critical information about destructive actions.

> [!SUCCESS]
> Use **success** to highlight a positive result.

## Shorthand aliases

Each callout type has a shorthand component that you can use without the `type` prop:

```mdx
<Note>A concise note for your readers.</Note>

<Warning>This action cannot be undone.</Warning>

<Tip>You can combine callouts with other components.</Tip>
```

> [!NOTE]
> A concise note for your readers.

> [!WARNING]
> This action cannot be undone.

> [!INFO]
> Shorthand aliases keep your MDX clean and readable.

> [!TIP]
> You can combine callouts with other components.

> [!CHECK]
> Your configuration is valid.

> [!DANGER]
> Deleting a project removes all associated data permanently.

The available aliases are `<Note>`, `<Warning>`, `<Info>`, `<Tip>`, `<Check>`, and `<Danger>`.

## With a title

Add a `title` prop to display a heading above the callout content:

```mdx
<Callout type="warning" title="Breaking change">
  The `v2` API removes the `legacy` parameter. Update your integration before
  upgrading.
</Callout>
```

> [!WARNING]
> The `v2` API removes the `legacy` parameter. Update your integration before
>   upgrading.

## Props

- `type` (type: "info" | "success" | "warning" | "danger" | "note" | "tip" | "check", required: false, default: "info"): Visual style of the callout.
- `title` (type: string, required: false): Optional heading displayed above the content.
- `icon` (type: ReactNode, required: false): Custom icon rendered before the content.
- `color` (type: string, required: false): Custom border and background color (hex or CSS color).
- `children` (type: ReactNode, required: true): The callout content.