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](/path).

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

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

Props

All callouts accept the same props:

Prop	Type	Default	Description
`title`	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

What's Next?

Accordion

Collapsible sections for optional content

Cards

Highlight features and navigation