Skip to main content

Actions and status

Callout

Highlight supporting guidance or caveats without the stronger semantics of a stateful alert. It's the 'by the way' of UI components.

Curated demo

Reference

Highlight supporting guidance or caveats without the stronger semantics of a stateful alert. It's the 'by the way' of UI components.

  • Use Callout for documentation guidance and side notes. It's a friendly nudge in the right direction.
  • Prefer Alert when the message represents a state change or warning.
  • Great for 'Pro tips' and 'Did you know?' sections.

Example snippet

<Callout title="Consumer-owned">Route metadata stays local.</Callout>