# Callouts

Callouts make notes in your content stand out. Write them right in Markdown, with nothing to import.

## Directive syntax

```md
:::tip[Preview locally first]
Run `pnpm dev` and take a look before you publish.
:::
```

> [!TIP]
> **Preview locally first**
>
> Run `pnpm dev` and take a look before you publish.

The title goes in the brackets and can be left out. The block holds ordinary Markdown, so lists and code blocks work as they are, with no prefix on every line.

There are five types, each with its own color in the default styles:

> [!NOTE]
> `note`: extra information.

> [!TIP]
> `tip`: advice and tips.

> [!IMPORTANT]
> `important`: something readers must know.

> [!WARNING]
> `warning`: something that may go wrong.

> [!CAUTION]
> `caution`: an action that may cause loss.

A misspelled type such as `:::tips` fails the build, instead of silently showing up as text.

## GitHub syntax

GitHub’s alert syntax works too, handy for content moved over from a README:

```md
> [!WARNING]
> This cannot be undone.
```

> [!WARNING]
> This cannot be undone.

It also shows correctly on GitHub and in editor previews, but has no title. Use the directive syntax when you need one.

## In components and layouts

In `.astro` files, use the `Callout` component, which renders the same as the Markdown syntax:

```astro
---
import { Callout } from '@minidocs/astro/components';
---

<Callout.Root type="tip">
  <Callout.Title>Preview locally first</Callout.Title>
  <p>Run <code>pnpm dev</code> and take a look before you publish.</p>
</Callout.Root>
```

`type` is one of the five types, `note` by default.

## Turning the syntax off

Both syntaxes are on by default and can be turned off separately:

```js
minidocs({
  markdown: {
    directives: false, // :::tip
    alerts: false, // > [!TIP]
  },
});
```

With the directive syntax on, text with colons in your content, such as `10:30` or `a:hover`, still shows as it is.