@blueprintjs/core/src/components/callout/callout.md

Core styles & components

@# Callout

**Callouts** visually highlight important content for the user. They may contain
a title, an icon and content. Each intent has a default icon associated with it.

@## Usage

```ts copy
import { Callout } from "@blueprintjs/core";
```

```tsx
<Callout title="Our generic title">This is an example callout, with simple content</Callout>
```

@## Examples

@### Basic

A **Callout** highlights important content with an optional title and body text.

@reactCodeExample CalloutBasicExample

@### Intent

The `intent` prop sets the visual style of the **Callout**, reflecting its purpose or severity. Each intent applies a unique color and includes a default icon.

@reactCodeExample CalloutIntentExample

@### Icon

The `icon` prop allows customization of the **Callout** icon. Provide a custom
icon, or disable it by setting `icon={false}`.

@reactCodeExample CalloutIconExample

@### Compact

Enable the `compact` prop to reduce the padding of the **Callout** for a more condensed appearance.

@reactCodeExample CalloutCompactExample

@### Minimal

Enable the `minimal` prop to remove the background color fill from the **Callout**.

@reactCodeExample CalloutMinimalExample

@## Interactive Playground

@reactExample CalloutPlaygroundExample

@## Props interface

@interface CalloutProps