> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Callout

> Learn how to use the Callout component to add warnings, tips, notes, and alerts to your documentation with custom icons and intents.

The `<Callout>` component highlights important information, warnings, or tips in your documentation. Use callouts to emphasize critical details that readers shouldn't miss, such as breaking changes, prerequisites, or helpful best practices.

To display very short pieces of information like status indicators and version numbers, use [badges](/learn/docs/writing-content/components/badges).

## Usage

This adds a note in your documentation.

**`Markdown`**

```jsx Markdown
<Note>This adds a note in your documentation.</Note>
```

## Variants

### Intents

This draws attention to important information

This raises a warning to watch out for

This indicates a successful operation or positive outcome

This indicates a potential error

This highlights additional context or supplementary information

This celebrates an announcement, styled using the primary accent of the docs site

This suggests a helpful tip

This shows a checked status

**`Markdown`**

```jsx Markdown
<Info>This draws attention to important information</Info>
<Warning>This raises a warning to watch out for</Warning>
<Success>This indicates a successful operation or positive outcome</Success>
<Error>This indicates a potential error</Error>
<Note>This highlights additional context or supplementary information</Note>
<Launch>This celebrates an announcement, styled using the primary accent of the docs site</Launch>
<Tip>This suggests a helpful tip</Tip>
<Check>This shows a checked status</Check>
```

### Custom icon

#### Example callout

This callout uses a title and a custom Font Awesome icon.

**`Markdown`**

```jsx Markdown
<Warning title="Example callout" icon="skull-crossbones">
This callout uses a title and a custom Font Awesome icon. 
</Warning>
```

## Properties

**`intent`** `string` — required

The type of callout. Available options: `info`, `warning`, `success`, `error`, `note`, `launch`, `tip`, `check`

---

**`title`** `string`

The title of your callout

---

**`icon`** `string | ReactElement`

The icon of your callout. Can be:

* A [Font Awesome](https://fontawesome.com/icons) icon name
* A React element
* If not specified, uses a default icon based on the intent:
  * info: InfoCircle
  * warning: Bell
  * success: CheckCircle
  * error: WarningTriangle
  * note: Pin
  * launch: Rocket
  * tip: Star
  * check: Check

---

**`className`** `string`

Additional CSS classes to apply to the callout

---

> Learn how to use the Callout component to add warnings, tips, notes, and alerts to your documentation with custom icons and intents.