Prepared Docs

Callout highlights important messages, notifications, and alerts that need attention or provide helpful context. It presents critical information with clear visual hierarchy using semantic colors, icons, and optional actions.

Props

Name	Type	Default	Description
`title`	`LocalizedMessage`	—	Primary localized message displayed in the callout.
`ariaLabel`	`string`	—	ARIA label override for the callout container.
`ctaButton`	`CalloutCtaButton`	—	Configuration for an optional call-to-action button rendered in the callout.
`description`	`ReactNode`	—	Optional body copy beneath the title. Description is for informational text only: localized strings, `CoreText`, text-only `FlexBox` compositions, and semantic `ul`/`ol`/`li` lists inside `Typography`. Do not embed buttons, form fields, `Card`, pills, navigation, or multi-control layouts in new code. Route CTAs to `ctaButton` / `secondaryIconButton`; route forms and interactive panels to `Card`. `ReactNode` remains open for legacy rich text compatibility. See `./COMPOSITION.md`.
`dismissible`	`boolean`	`false`	When true, shows a dismiss (X) button that hides the callout.
`isLoading`	`boolean`	`false`	When true, replaces the variant icon with a loading spinner.
`layout`	`CalloutLayout`	`CalloutLayout.Columns`	Layout variant controlling the placement of icon, title, actions, content, and description.
`onDismiss`	`(() => void)`	—	Callback fired when the callout is dismissed.
`role`	`"note" \| "alert" \| "status"`	—	ARIA role override. Defaults to a role derived from the callout type.
`secondaryIconButton`	`CalloutSecondaryIconButton`	—	Configuration for an optional secondary icon button rendered next to the CTA.
`type`	`CalloutType`	`CalloutType.Note`	Semantic variant controlling the color, icon, and ARIA role.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Variants

Note

Use for general information, tips, or neutral notifications.

Info

Use for information that doesn’t indicate a warning, success, or failure state.

Success

Confirms a successful action or positive outcome.

Warning

Requires attention, but isn’t an error.

Error

Indicates a failure or problem that likely requires the user to take action.

With actions

Callouts can include one or more CTAs.

Single action

Dismissible callouts

Allow users to hide temporary or low‑priority messages.

Description

Pass title as a LocalizedMessage from formatMessage or formatInternalMessage. For descriptions, prefer a localized string, CoreText, or a text-only FlexBox composition. Reserve Typography for semantic ul/ol/li content. The ReactNode type supports legacy rich-text surfaces; new code should treat description as text-only. Use ctaButton and secondaryIconButton for actions; use Card for forms and multi-control layouts.

CalloutType is the color authority for all title and description text, including nested CoreText, Typography, and list markers. Consumer color overrides inside a callout are unsupported.

Secondary icon button

Loading

Dismissible with CTA and description

All types

Constrained width (wrapping)

Callout / Usage

Callout / Accessibility

Secondary icon button

Dismissible with CTA and description

All types

Constrained width (wrapping)

View Source

Submit Issue

Props

Name	Type	Default	Description
`title`	`LocalizedMessage`	—	Primary localized message displayed in the callout.
`ariaLabel`	`string`	—	ARIA label override for the callout container.
`ctaButton`	`CalloutCtaButton`	—	Configuration for an optional call-to-action button rendered in the callout.
`description`	`ReactNode`	—	Optional body copy beneath the title. Description is for informational text only: localized strings, `CoreText`, text-only `FlexBox` compositions, and semantic `ul`/`ol`/`li` lists inside `Typography`. Do not embed buttons, form fields, `Card`, pills, navigation, or multi-control layouts in new code. Route CTAs to `ctaButton` / `secondaryIconButton`; route forms and interactive panels to `Card`. `ReactNode` remains open for legacy rich text compatibility. See `./COMPOSITION.md`.
`dismissible`	`boolean`	`false`	When true, shows a dismiss (X) button that hides the callout.
`isLoading`	`boolean`	`false`	When true, replaces the variant icon with a loading spinner.
`layout`	`CalloutLayout`	`CalloutLayout.Columns`	Layout variant controlling the placement of icon, title, actions, content, and description.
`onDismiss`	`(() => void)`	—	Callback fired when the callout is dismissed.
`role`	`"note" \| "alert" \| "status"`	—	ARIA role override. Defaults to a role derived from the callout type.
`secondaryIconButton`	`CalloutSecondaryIconButton`	—	Configuration for an optional secondary icon button rendered next to the CTA.
`type`	`CalloutType`	`CalloutType.Note`	Semantic variant controlling the color, icon, and ARIA role.

Storybook

Interactive examples and edge cases for this component are in Storybook.

Variants

Note

Use for general information, tips, or neutral notifications.

Info

Use for information that doesn’t indicate a warning, success, or failure state.

Success

Confirms a successful action or positive outcome.

Warning

Requires attention, but isn’t an error.

Error

Indicates a failure or problem that likely requires the user to take action.

With actions

Callouts can include one or more CTAs.

Single action

Dismissible callouts

Allow users to hide temporary or low‑priority messages.

Description

CalloutType is the color authority for all title and description text, including nested CoreText, Typography, and list markers. Consumer color overrides inside a callout are unsupported.