---
id: admonitions
title: Admonitions
description: Handling admonitions/callouts in Docusaurus Markdown
slug: /markdown-features/admonitions
---

In addition to the basic Markdown syntax, we use [remark-admonitions](https://github.com/elviswolcott/remark-admonitions) alongside MDX to add support for admonitions. Admonitions are wrapped by a set of 3 colons.

Example:

    :::note

    Some **content** with _markdown_ `syntax`. Check [this `api`](#).

    :::

    :::tip

    Some **content** with _markdown_ `syntax`. Check [this `api`](#).

    :::

    :::info

    Some **content** with _markdown_ `syntax`. Check [this `api`](#).

    :::

    :::caution

    Some **content** with _markdown_ `syntax`. Check [this `api`](#).

    :::

    :::danger

    Some **content** with _markdown_ `syntax`. Check [this `api`](#).

    :::

:::note

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::tip

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::info

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::caution

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

:::danger

Some **content** with _markdown_ `syntax`. Check [this `api`](#).

:::

## Usage with Prettier {#usage-with-prettier}

If you use [Prettier](https://prettier.io) to format your Markdown files, Prettier might autoformat your code to invalid admonition syntax. To avoid this problem, add empty lines around the starting and ending directives. This is also why the examples we show here all have empty lines around the content.

<!-- prettier-ignore -->
```md
<!-- Prettier doesn't change this -->
::: note

Hello world

:::

<!-- Prettier changes this -->
::: note 
Hello world 
:::

<!-- to this -->
::: note Hello world:::
```

## Specifying title {#specifying-title}

You may also specify an optional title

    :::note Your Title

    Some **content** with _markdown_ `syntax`.

    :::

:::note Your Title

Some **content** with _markdown_ `syntax`.

:::

## Admonitions with MDX

You can use MDX inside admonitions too!

```jsx
import Tabs from '@theme/Tabs';

import TabItem from '@theme/TabItem';

:::tip Use tabs in admonitions

<Tabs>
  <TabItem value="apple" label="Apple">This is an apple 🍎</TabItem>
  <TabItem value="orange" label="Orange">This is an orange 🍊</TabItem>
  <TabItem value="banana" label="Banana">This is a banana 🍌</TabItem>
</Tabs>

:::
```

```mdx-code-block
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
```

:::tip Use tabs in admonitions

```mdx-code-block
<Tabs>
  <TabItem value="apple" label="Apple">This is an apple 🍎</TabItem>
  <TabItem value="orange" label="Orange">This is an orange 🍊</TabItem>
  <TabItem value="banana" label="Banana">This is a banana 🍌</TabItem>
</Tabs>
```

:::

## Usage in JSX

Outside of Markdown, you can use the `@theme/Admonitions` component to get the same output.

```jsx title="MyReactPage.jsx"
import Admonition from '@theme/Admonitions';

export default function MyReactPage() {
  return (
    <div>
      <Admonition type="info">
        <p>Some information</p>
      </Admonition>
    </div>
  );
}
```

The types that are accepted are the same as above: `note`, `tip`, `danger`, `info`, `caution`. Optionally, you can specify an icon by passing a JSX element or a string, or a title:

```jsx title="MyReactPage.jsx"
<Admonition type="tip" icon="💡" title="Did you know...">
  <p>
    Use plugins to introduce shorter syntax for the most commonly used JSX
    elements in your project.
  </p>
</Admonition>
```

```mdx-code-block
import Admonition from '@theme/Admonition';
import BrowserWindow from '@site/src/components/BrowserWindow';

<BrowserWindow>
<Admonition type="tip" icon="💡" title="Did you know...">
<p>Use plugins to introduce shorter syntax for the most commonly used JSX elements in your project.</p>
</Admonition>
</BrowserWindow>
```