---
title: Callout
description: Use callouts to highlight important information with consistent visual emphasis.
---

Use callouts to pull key notes out of regular paragraph flow.

<ComponentPreview>
  ```mdx
  <Callout type="warning" title="Check before you travel">
    Confirm passport validity and visa requirements before booking.
  </Callout>
  ```
</ComponentPreview>

## Choose a callout type

Use `type` to match the intent of the message. Each type sets the default title, icon, and color.

<ComponentPreview showAllCode>
  ```mdx
  <Callout type="info">The library closes at 7:00 PM on weekdays.</Callout>

  <Callout type="tip">Freeze fresh herbs in olive oil to preserve flavor.</Callout>

  <Callout type="warning">
    Ceramic containers can crack when moved from freezer to oven.
  </Callout>

  <Callout type="danger">Do not mix bleach with ammonia.</Callout>

  <Callout type="success">Your reservation has been confirmed.</Callout>
  ```
</ComponentPreview>

### Built-in presets

Each type includes a default title, icon, and color when you do not override them.

| Type | Title | Icon | Color |
| --- | --- | --- | --- |
| `info` | `Info` | `fluent:info-16-filled` | `#5589C5` |
| `tip` | `Tip` | `fluent:lightbulb-filament-24-filled` | `#FFB400` |
| `warning` | `Warning` | `fluent:warning-16-filled` | `#FF990A` |
| `danger` | `Danger` | `fluent:diamond-dismiss-24-filled` | `#E5484D` |
| `success` | `Success` | `fluent:checkmark-starburst-24-filled` | `#46A758` |

### Default behavior

If you omit `type`, `Callout` uses the `info` style.

<ComponentPreview showAllCode>
  ```mdx
  <Callout>
    This callout uses the default `info` type.
  </Callout>
  ```
</ComponentPreview>

## Control the header

### Set a custom title and icon

Use `title` and `icon` when the default label or icon is not specific enough. The `icon` prop accepts an Iconify name or an image URL.

<ComponentPreview showAllCode>
  ```mdx
  <Callout type="tip" title="Quick prep trick" icon="lucide:sparkles">
    Slice fruit the night before and store it in airtight containers.
  </Callout>
  ```
</ComponentPreview>

### Hide the icon

Set `icon={false}` when the title and accent bar are enough.

<ComponentPreview showAllCode>
  ```mdx
  <Callout type="info" icon={false}>
    This callout keeps the default title but removes the icon.
  </Callout>
  ```
</ComponentPreview>

### Hide the title

Set `title={false}` when the callout body should sit directly beside the icon. If you also hide the icon, the callout renders only the body content and optional accent strip.

<ComponentPreview showAllCode>
  ```mdx
  <Callout type="warning" title={false}>
    This warning keeps the icon and accent bar, but removes the header title.
  </Callout>
  ```
</ComponentPreview>

### Hide the accent

Set `accent={false}` when you want a quieter callout without the vertical accent strip.

<ComponentPreview showAllCode>
  ```mdx
  <Callout type="tip" accent={false}>
    This callout keeps the icon and title, but removes the left accent strip.
  </Callout>
  ```
</ComponentPreview>

### Set a custom color

Use `color` to override both the icon color and the accent strip color.

<ComponentPreview showAllCode>
  ```mdx
  <Callout
    type="info"
    title="Seasonal note"
    icon="lucide:leaf"
    color="#0ea5e9"
  >
    Early spring seedlings need steady light and moderate watering.
  </Callout>
  ```
</ComponentPreview>

If `accent={false}` is set, `color` still applies to the icon.

<ComponentPreview showAllCode>
  ```mdx
  <Callout
    type="success"
    title="Approved"
    accent={false}
    color="#16a34a"
  >
    The icon keeps the custom color even without the left accent strip.
  </Callout>
  ```
</ComponentPreview>

## Use Markdown and components

Callout body content supports Markdown and other docs components.

<ComponentPreview showAllCode>
  ```mdx
  <Callout type="tip" title="Before publishing">
    <Columns columns={2}>
      <Column>
      - Review links
      - Check headings
      </Column>
      <Column>
      - Run a local preview
      - Confirm navigation
      </Column>
    </Columns>
  </Callout>
  ```
</ComponentPreview>

## Props

| Prop | Description | Type | Default |
| --- | --- | --- | ---: |
| `type` | Visual preset for the default title, icon, and color. | `"warning"`, `"info"`, `"tip"`, `"danger"`, or `"success"` | `"info"` |
| `title` | Header text shown above the callout body, or `false` to hide it. | `string` or `false` | Type-based default title |
| `icon` | Icon name to replace the default type icon, or `false` to hide it. | `string` or `false` | Type-based default icon |
| `accent` | Whether to show the vertical accent strip. | `boolean` | `true` |
| `color` | Custom color for the icon and accent strip. | `string` | Type-based default color |
| children | Callout body content. Supports Markdown. | `Markdown` |  |