Components

Callout

Highlight notes, tips, warnings, and other admonitions.

Use callouts to pull important information out of the main flow.

You can use the generic Callout component, or the fixed-variant wrappers Note, Tip, Warning, Info, Check, and Danger.

Generic callout#

Heads up

This is a custom callout body.

<Callout variant="note" title="Heads up">
  This is a custom callout body.
</Callout>

Neutral supplemental information.

<Note>Neutral supplemental information.</Note>

Best practices and helpful shortcuts.

<Tip>Best practices and helpful shortcuts.</Tip>

Risky operations or destructive behavior.

<Warning>Risky operations or destructive behavior.</Warning>

Contextual details readers should know.

<Info>Contextual details readers should know.</Info>

Success or completion states.

<Check>Success or completion states.</Check>

Irreversible actions and data loss.

<Danger>Irreversible actions and data loss.</Danger>

Hot path

This request is on the critical path.

<Callout variant="tip" icon="flame" title="Hot path">
  This request is on the critical path.
</Callout>

Name	Type	Description
variant	'note' \| 'tip' \| 'warning' \| 'info' \| 'check' \| 'danger'	Visual style and default icon. Default: note
title	ReactNode	Optional heading above the body. Without a title, only the body is shown.
icon	ReactNode \| string	Lucide name or element. Overrides the variant default icon.
children	ReactNode	Callout body content.

Note, Tip, Warning, Info, Check, and Danger accept only children and map to the matching variant.

Last updated on Aug 8, 2026