Callout

Inline guidance notes — warn by default, with info and danger tones.

Preview

Live

Warn callout — review imported fields before saving.

Info callout — optional guidance without blocking. 

<p class="ui-callout" role="note">
  <span class="ui-icon ui-icon--warning ui-callout__icon" aria-hidden="true"></span>
  <span>Review imported fields before saving.</span>
</p>
<p class="ui-callout ui-callout--info" role="note">…</p>
<p class="ui-callout ui-callout--danger" role="note">…</p>

Variants

Warn

Default — no modifier class.

Default warn tone.

Info

.ui-callout--info.

Informational guidance.

Danger

.ui-callout--danger.

High-risk or blocking note.

Accessibility

  • Uses role="note" — keep copy concise and actionable.
  • Icons are decorative (aria-hidden); meaning lives in the text.
  • Do not use callouts as the only error channel for form validation — pair with field errors.

API

HTML classes

Class Description
.ui-callout Base warn callout.
.ui-callout--info Info tone.
.ui-callout--danger Danger tone.
.ui-callout__icon Leading mask icon.

React props

From src/core/Callout.tsx — extends HTMLAttributes<HTMLParagraphElement>.

Prop Type Default Description
tone 'warn' | 'info' | 'danger' 'warn' Visual tone.
icon IconName tone default Override leading icon.
children ReactNode — Callout body (required).