---
title: Callouts
description: Highlight important information with styled callout blocks.
url: https://pr-23-a9c4e9fe1b6c.thally.app/components/callouts
---

# Callouts

Highlight important information with styled callout blocks.

Use `<Note>`, `<Tip>`, `<Warning>`, and `<Info>` to draw attention to important content. Each maps to a visual style that signals intent.

## Types

> **Note:**
  This is a **Note** — general information the reader should be aware of.

> **Tip:**
  This is a **Tip** — a helpful suggestion or best practice.

> **Warning:**
  This is a **Warning** — something that could cause problems if ignored.

> **Info:**
  This is an **Info** callout — neutral informational content.

```mdx
<Note>
  Standard note callout.
</Note>

<Tip>
  A helpful tip.
</Tip>

<Warning>
  Be careful about this.
</Warning>

<Info>
  Additional context.
</Info>
```

## Generic `<Callout>`

Use the generic `<Callout>` for custom-coloured callouts or callouts with a specific icon:

  Keep your API key safe — never expose it in client code.

```mdx
<Callout icon="key" color="#C77DFF">
  Keep your API key safe — never expose it in client code.
</Callout>
```

Migrated content that uses `<Callout type="...">` is also supported. The `type` value is normalised case-insensitively, and migration aliases `success` and `error` map to **Check** and **Danger** respectively.

## Props

All callout components accept arbitrary MDX children including inline code, links, and lists.

| Prop | Type | Description |
| --- | --- | --- |
| `title` | string | Optional heading displayed above the callout body. |
| `icon` | string | Replaces the default type glyph with a named icon from the shared icon set. |
| `color` | CSS colour | A plain CSS colour literal (hex, named, or functional notation such as `oklch()`) that drives the callout hue. |
| `colorDark` | CSS colour | Dark-mode override. When omitted, `color` is used in both themes. |