---
title: Callouts
slug: docs/callouts
docTags: 
createdAt: 2026-06-05T12:32:42.012Z
---

[Callout](docId\:c-sJUb-iR1V0j8c_BKSmC) blocks highlight important information using colored containers. They are useful for displaying tips, confirmations, warnings, and critical notices.

## Syntax

You can add this component using either Markdown or MDX.

::::Tabs
:::Tab{title="Markdown"}
```markdown
:::::hint{type="info"}
Your content here.
:::
```
:::

:::Tab{title="MDX"}
```javascript
<hint type="info">
Your content here.
</hint>
```
:::
::::

Callouts support the following types:

- `info`
- `success`
- `warning`
- `danger`

## MDX example

The following example creates four different callout types.

```html
<hint type="info">
Use **info** callouts for helpful tips and additional context.
</hint>

<hint type="success">
Use **success** callouts for positive outcomes or confirmations.
</hint>

<hint type="warning">
Use **warning** callouts for things users should be careful about.
</hint>

<hint type="danger">
Use **danger** callouts for critical warnings or destructive actions.
</hint>
```