#Callout

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

#Container syntax

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

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

:::tip
This is a `tip` 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.

#Component usage

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

import { Callout } from '@rspress/core/theme-original';

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

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

#Customization

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

npx rspress eject Callout

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

export { Callout } from './components/Callout';
export * from '@rspress/core/theme-original';

#Props

interface CalloutProps {
  /**
   * The type of callout, which determines its color and icon.
   */
  type: 'tip' | 'note' | '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;
}