---
title: "Callout"
description: "Highlight important information with eye-catching colored boxes and icons."
canonical_url: "https://ui.nuxt.com/docs/typography/callout"
last_updated: "2026-05-07"
---
# Callout

> Highlight important information with eye-catching colored boxes and icons.

## Usage

Use markdown in the default slot of the `callout` component to add eye-catching context to your content.

```vue
<template>
  <UCallout>
    This is a `callout` with full **markdown** support.
  </UCallout>
</template>
```

### Icon

Use the `icon` prop to display an icon next to the content.

```vue
<template>
  <UCallout icon="i-lucide-square-play">
    This is a `callout` with an icon.
  </UCallout>
</template>
```

### Color

Use the `color` prop to change the color of the callout.

```vue
<template>
  <UCallout icon="i-lucide-info" color="info">
    This is a `callout` with a custom color.
  </UCallout>
</template>
```

### Link

You can pass any property from the [`<NuxtLink>`](https://nuxt.com/docs/api/components/nuxt-link) component such as `to` and `target` to make the callout a link.

```vue
<template>
  <UCallout icon="i-lucide-square-play" to="/docs/getting-started/installation/nuxt" color="neutral">
    Learn how to install `@nuxt/ui` in your project.
  </UCallout>
</template>
```

## Shortcuts

You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors.

```vue
<template>
  <__flatten>
  <blockquote>
  <p>
  [!NOTE]</p>
  <p>
  Here's some additional information for you.</p></blockquote>
  <blockquote>
  <p>
  [!TIP]</p>
  <p>
  Here's a helpful suggestion.</p></blockquote>
  <blockquote>
  <p>
  [!WARNING]</p>
  <p>
  Be careful with this action as it might have unexpected results.</p></blockquote>
  <blockquote>
  <p>
  [!CAUTION]</p>
  <p>
  This action cannot be undone.</p></blockquote></__flatten>
  <template v-slot:code=>
  <pre className=language-mdc shiki shiki-themes material-theme-lighter material-theme material-theme-palenight code=::note
  Here's some additional information.
  ::
  
  ::tip
  Here's a helpful suggestion.
  ::
  
  ::warning
  Be careful with this action as it might have unexpected results.
  ::
  
  ::caution
  This action cannot be undone.
  ::
   language=mdc meta= style=>
  <code __ignoreMap=>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  note
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  Here's some additional information.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  tip
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  Here's a helpful suggestion.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  warning
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  Be careful with this action as it might have unexpected results.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span>
  <span class=line>
  <span /></span>
  <span class=line>
  <span class=sMK4o>
  ::</span>
  <span class=swJcz>
  caution
  </span></span>
  <span class=line>
  <span class=sTEyZ>
  This action cannot be undone.
  </span></span>
  <span class=line>
  <span class=sMK4o>
  ::
  </span></span></code></pre></template>
</template>
```

## API

### Props

```ts
/**
 * Props for the ProseCallout component
 */
interface ProseCalloutProps {
  to?: string | St | vt | undefined;
  target?: "_blank" | "_parent" | "_self" | "_top" | (string & {}) | null | undefined;
  icon?: any;
  color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined;
  ui?: { base?: ClassNameValue; icon?: ClassNameValue; externalIcon?: ClassNameValue; } | undefined;
}
```

### Slots

```ts
/**
 * Slots for the Callout component
 */
interface CalloutSlots {
  default(): any;
}
```

## Theme

```ts [app.config.ts]
export default defineAppConfig({
  ui: {
    prose: {
      callout: {
        slots: {
          base: [
            'group relative block px-4 py-3 rounded-md text-sm/6 my-5 last:mb-0 [&_code]:text-xs/5 [&_code]:bg-default [&_pre]:bg-default [&>div]:my-2.5 [&_ul]:my-2.5 [&_ol]:my-2.5 *:last:mb-0! [&_ul]:ps-4.5 [&_ol]:ps-4.5 [&_li]:my-0',
            'transition-colors'
          ],
          icon: [
            'size-4 shrink-0 align-sub me-2 inline-block',
            'transition-colors'
          ],
          externalIcon: [
            'size-4 align-top absolute right-2 top-2 pointer-events-none',
            'transition-colors'
          ]
        },
        variants: {
          color: {
            primary: {
              base: 'border border-primary/25 bg-primary/10 text-primary-600 dark:text-primary-300 [&_a]:text-primary [&_a]:hover:border-primary [&_a]:focus-visible:outline-primary [&_code]:text-primary-600 dark:[&_code]:text-primary-300 [&_code]:border-primary/25 [&_a]:hover:[&>code]:border-primary [&_a]:hover:[&>code]:text-primary [&_a]:focus-visible:[&>code]:border-primary [&_a]:focus-visible:[&>code]:text-primary [&>ul]:marker:text-primary/50',
              icon: 'text-primary',
              externalIcon: 'text-primary-600 dark:text-primary-300'
            },
            secondary: {
              base: 'border border-secondary/25 bg-secondary/10 text-secondary-600 dark:text-secondary-300 [&_a]:text-secondary [&_a]:hover:border-secondary [&_a]:focus-visible:outline-secondary [&_code]:text-secondary-600 dark:[&_code]:text-secondary-300 [&_code]:border-secondary/25 [&_a]:hover:[&>code]:border-secondary [&_a]:hover:[&>code]:text-secondary [&_a]:focus-visible:[&>code]:border-secondary [&_a]:focus-visible:[&>code]:text-secondary [&>ul]:marker:text-secondary/50',
              icon: 'text-secondary',
              externalIcon: 'text-secondary-600 dark:text-secondary-300'
            },
            success: {
              base: 'border border-success/25 bg-success/10 text-success-600 dark:text-success-300 [&_a]:text-success [&_a]:hover:border-success [&_a]:focus-visible:outline-success [&_code]:text-success-600 dark:[&_code]:text-success-300 [&_code]:border-success/25 [&_a]:hover:[&>code]:border-success [&_a]:hover:[&>code]:text-success [&_a]:focus-visible:[&>code]:border-success [&_a]:focus-visible:[&>code]:text-success [&>ul]:marker:text-success/50',
              icon: 'text-success',
              externalIcon: 'text-success-600 dark:text-success-300'
            },
            info: {
              base: 'border border-info/25 bg-info/10 text-info-600 dark:text-info-300 [&_a]:text-info [&_a]:hover:border-info [&_a]:focus-visible:outline-info [&_code]:text-info-600 dark:[&_code]:text-info-300 [&_code]:border-info/25 [&_a]:hover:[&>code]:border-info [&_a]:hover:[&>code]:text-info [&_a]:focus-visible:[&>code]:border-info [&_a]:focus-visible:[&>code]:text-info [&>ul]:marker:text-info/50',
              icon: 'text-info',
              externalIcon: 'text-info-600 dark:text-info-300'
            },
            warning: {
              base: 'border border-warning/25 bg-warning/10 text-warning-600 dark:text-warning-300 [&_a]:text-warning [&_a]:hover:border-warning [&_a]:focus-visible:outline-warning [&_code]:text-warning-600 dark:[&_code]:text-warning-300 [&_code]:border-warning/25 [&_a]:hover:[&>code]:border-warning [&_a]:hover:[&>code]:text-warning [&_a]:focus-visible:[&>code]:border-warning [&_a]:focus-visible:[&>code]:text-warning [&>ul]:marker:text-warning/50',
              icon: 'text-warning',
              externalIcon: 'text-warning-600 dark:text-warning-300'
            },
            error: {
              base: 'border border-error/25 bg-error/10 text-error-600 dark:text-error-300 [&_a]:text-error [&_a]:hover:border-error [&_a]:focus-visible:outline-error [&_code]:text-error-600 dark:[&_code]:text-error-300 [&_code]:border-error/25 [&_a]:hover:[&>code]:border-error [&_a]:hover:[&>code]:text-error [&_a]:focus-visible:[&>code]:border-error [&_a]:focus-visible:[&>code]:text-error [&>ul]:marker:text-error/50',
              icon: 'text-error',
              externalIcon: 'text-error-600 dark:text-error-300'
            },
            neutral: {
              base: 'border border-muted bg-muted text-default',
              icon: 'text-highlighted',
              externalIcon: 'text-dimmed'
            }
          },
          to: {
            true: 'border-dashed'
          }
        },
        compoundVariants: [
          {
            color: 'primary',
            to: true,
            class: {
              base: 'hover:border-primary has-focus-visible:border-primary',
              externalIcon: 'group-hover:text-primary'
            }
          },
          {
            color: 'secondary',
            to: true,
            class: {
              base: 'hover:border-secondary has-focus-visible:border-secondary',
              externalIcon: 'group-hover:text-secondary'
            }
          },
          {
            color: 'success',
            to: true,
            class: {
              base: 'hover:border-success has-focus-visible:border-success',
              externalIcon: 'group-hover:text-success'
            }
          },
          {
            color: 'info',
            to: true,
            class: {
              base: 'hover:border-info has-focus-visible:border-info',
              externalIcon: 'group-hover:text-info'
            }
          },
          {
            color: 'warning',
            to: true,
            class: {
              base: 'hover:border-warning has-focus-visible:border-warning',
              externalIcon: 'group-hover:text-warning'
            }
          },
          {
            color: 'error',
            to: true,
            class: {
              base: 'hover:border-error has-focus-visible:border-error',
              externalIcon: 'group-hover:text-error'
            }
          },
          {
            color: 'neutral',
            to: true,
            class: {
              base: 'hover:border-inverted has-focus-visible:border-inverted',
              externalIcon: 'group-hover:text-highlighted'
            }
          }
        ],
        defaultVariants: {
          color: 'neutral'
        }
      }
    }
  }
})
```

## Changelog

See commit history for [component](https://github.com/nuxt/ui/commits/v4/src/runtime/components/prose/Callout.vue) and [theme](https://github.com/nuxt/ui/commits/v4/src/theme/prose/callout.ts).


## Sitemap

See the full [sitemap](/sitemap.md) for all pages.