---
title: Callout
icon: message-circle
---

Callouts highlight important information with colored boxes. Four types are available: info, success, warning, and danger.

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

## Syntax

<CodeblockTabs>

MDX

```html
<hint type="info">Your content here.</hint>
```

Markdown

```markdown
:::::hint{type="info"}
Your content here.
:::::
```

</CodeblockTabs>

Types: `info`, `success`, `warning`, `danger`
