---
title: Callout
description: Highlight an editorial note or a rule for using the brand correctly.
sidebar:
  order: 5
---

import previewCode from "../../snippets/callout.mdx?raw";
import example0 from "../../snippets/callout-recommended.mdx?raw";

import prohibitedCode from "../../snippets/callout-prohibited.mdx?raw";

import uiOverrideCode from "../../snippets/callout-ui-override.mdx?raw";

<ComponentPreview path="callout" code={previewCode} />

## Usage

Put the explanation in the default slot. Without
a title or tone, the heading uses the localized note label.

```mdx
<Callout>

Use the supplied artwork for every application.

</Callout>
```

The default preview sets `tone="note"` explicitly; omitting it produces the same note treatment.

## Examples

### Add an editorial note

Use `tone="note"` for supporting information. Leaving out `title` keeps the
localized note heading.

<ComponentPreview path="callout" code={previewCode} />

### Mark a recommended use

Use `tone="do"` for a positive rule. Omit `title` to keep the localized heading
for that tone; a custom title replaces that heading rather than translating it.

<ComponentPreview path="callout-recommended" code={example0} />

### Explain a prohibited use

Use `tone="dont"` for a prohibition and a custom `title` to name the rule.
The title replaces the localized heading and is rendered exactly as supplied.

<ComponentPreview path="callout-prohibited" code={prohibitedCode} />

### Override interface labels

The page’s localized labels are supplied automatically. Pass a complete `ui`
value to override them for this callout. Spread the existing value and its
`content` group to change the note label while preserving all other strings.
For a single heading, `title` is the simpler option.

<ComponentPreview path="callout-ui-override" code={uiOverrideCode} />

## API reference

| Prop | Type | Default | Description |
| - | - | - | - |
| `ui?` | `UIStrings` | `props.ui` | Override interface strings for this component. Supplied automatically in Brandtree MDX. |
| `tone?` | `"note" \| "do" \| "dont"` | `"note"` | Select the note, recommendation, or prohibition treatment. |
| `title?` | `string` | - | Heading; defaults to the localized label for the tone. |
| `class?` | `string` | - | Additional class on the outer element. |

The default slot accepts prose and child components.