---
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`](#).

:::

## 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>
```

:::