> For AI agents: the complete documentation index is available at https://rspress.rs/llms.txt, the full documentation bundle is available at https://rspress.rs/llms-full.txt.

# Callout

The Callout component is used to display highlighted information blocks such as tips, warnings, and notes.

:::tip
We recommend using [container syntax](https://rspress.rs/guide/use-mdx/container.md) which works in both Markdown and MDX files.
:::

## Container syntax

In most cases, use the container syntax to create callouts:


**Rendered Result**

:::note
This is a `note` callout
:::
:::tip
This is a `tip` callout
:::
:::important
This is an `important` callout
:::
:::info
This is an `info` callout
:::
:::warning
This is a `warning` callout
:::
:::danger
This is a `danger` callout
:::
:::details
This is a `details` callout
:::
:::tip Custom Title
This is a callout with a custom title
:::
:::tip\{title="Custom Title"}
This is a callout with a custom title
:::


**Syntax**

```markdown
:::note
This is a `note` callout
:::

:::tip
This is a `tip` callout
:::

:::important
This is an `important` callout
:::

:::info
This is an `info` callout
:::

:::warning
This is a `warning` callout
:::

:::danger
This is a `danger` callout
:::

:::details
This is a `details` callout
:::

:::tip Custom Title
This is a callout with a custom title
:::

:::tip{title="Custom Title"}
This is a callout with a custom title
:::
```


For more container syntax details, see [Container](https://rspress.rs/guide/use-mdx/container.md).

## Component usage

You can also use the Callout component directly in MDX files:

```mdx title="index.mdx"
import { Callout } from '@rspress/core/theme';

<Callout type="tip">This is a tip callout</Callout>

<Callout type="warning" title="Warning">
  This is a warning with custom title
</Callout>
```


Tip

This is a tip callout


Warning

This is a warning with custom title

## Customization

You can eject the Callout component to customize its styles and behavior:

```bash
npx rspress eject Callout
```

This will copy the component to `theme/components/Callout`. After customization, re-export it in your `theme/index.tsx`:

```tsx title="theme/index.tsx"
export { Callout } from './components/Callout';
export * from '@rspress/core/theme-original';
```

## Props

```ts
interface CalloutProps {
  /**
   * The type of callout, which determines its color and icon.
   */
  type:
    | 'tip'
    | 'note'
    | 'important'
    | 'warning'
    | 'caution'
    | 'danger'
    | 'info'
    | 'details';
  /**
   * Custom title for the callout. If not provided, the capitalized type will be used.
   */
  title?: string;
  /**
   * The content to display inside the callout.
   */
  children: React.ReactNode;
}
```