Callouts

Callouts draw attention to important information that readers shouldn't miss. Use them sparingly for maximum impact.

Available Callouts

Note - Helpful context or additional information. Use for tips that enhance understanding.

Info - Neutral information or facts. Use for supplementary details.

Tip - Best practices or optimizations. Use for "pro tips" that improve the experience.

Warning - Important caveats or requirements. Use when something could cause issues if ignored.

Danger - Critical warnings. Use for actions that could cause data loss or security issues.

Check - Success confirmations. Use to confirm correct behavior or successful completion.

Usage

<Note>

This is helpful context for the reader.

</Note>

<Warning>

This could cause issues if you skip this step.

</Warning>

<Danger>

This action cannot be undone. Proceed with caution.

</Danger>

With Titles

Add a custom title to any callout:

<Note title="Did you know?">

You can use **Markdown** inside callouts, including `code` and [links](/introduction).

</Note>

You can use Markdown inside callouts, including code and links.

With Code Blocks

Callouts can contain code:

The getData() function signature changed:

// Before (v1.x)
getData(id)

// After (v2.0)
getData({ id, options })

Best Practices

Too many callouts dilute their impact. Aim for 1-2 per page maximum.

If everything is important, nothing is important.

Scenario	Callout
Helpful tip	`<Tip>`
Extra context	`<Note>` or `<Info>`
Potential gotcha	`<Warning>`
Irreversible action	`<Danger>`
Confirmation	`<Check>`
Custom branding	`<Callout>`

Callouts should be scannable. If you need multiple paragraphs, consider using an Accordion instead.

Good: One or two sentences Avoid: Multiple paragraphs of text

Place callouts:

Before code that has requirements
After instructions with important caveats
Near the content they reference

Properties

All callouts accept the same properties:

string

Custom title (replaces default).

Accessibility

Callouts are implemented with semantic HTML and ARIA roles:

Screen readers announce the callout type
Color is not the only indicator (icons are included)
Sufficient color contrast in both themes

Custom Callout

Create callouts with custom icons and colors using the Callout component:

Custom - Use any icon and color to match your content.

Deploy your changes with confidence using our CI/CD pipeline.

Use icon style prefixes like regular/, light/, or duotone/ for different weights.

Custom Callout Usage

<Callout icon="key" color="#FFC107">
  This callout uses a key icon with amber color.
</Callout>

<Callout icon="rocket" color="#9333EA">
  This callout uses a rocket icon with purple color.
</Callout>

<Callout icon="regular/star" color="#EC4899">
  Use style prefixes for different icon weights.
</Callout>

Custom Callout Properties

stringdefault: circle-info

Icon name (see Icons).

string

Hex color code (e.g., #FFC107). Defaults to the accent color.

Icon style prefixes: Add a prefix to change the icon weight:

solid/ - Filled icons (default)
regular/ - Outlined icons
light/ - Thin outlined icons
duotone/ - Two-tone icons