Callout

A block of highlighted text that draws attention to a message.

Changes are saved automatically as you type.

import { Callout } from '@ontoui/react';

<Callout.Root>
  <Callout.Text>Changes are saved automatically as you type.</Callout.Text>
</Callout.Root>;

Anatomy

Part	Element	Description
Callout.Root	<div>	The callout container. Carries the color and shape.
Callout.Icon	<span>	A decorative icon slot. Hidden from screen readers.
Callout.Text	<div>	The message. Fills the row and wraps across lines.

Callout is presentational — it renders a block of text and has no interaction or state. Callout.Text is a <div> rather than a <span>, so a message can hold block content such as a paragraph or a list.

Examples

Colors

Use the color prop to convey tone. Colors are decorative only — screen readers announce the text, not the tint, so keep the meaning in the message rather than in the color alone.

Changes are saved automatically as you type.

Your profile has been published.

Your trial ends in three days.

We couldn't process your payment.

<Callout.Root>
  <Callout.Text>Changes are saved automatically as you type.</Callout.Text>
</Callout.Root>
<Callout.Root color="success">
  <Callout.Text>Your profile has been published.</Callout.Text>
</Callout.Root>
<Callout.Root color="warning">
  <Callout.Text>Your trial ends in three days.</Callout.Text>
</Callout.Root>
<Callout.Root color="danger">
  <Callout.Text>We couldn't process your payment.</Callout.Text>
</Callout.Root>

Icon

Add a Callout.Icon to place an icon next to the message. Any icon works — an inline SVG or a component from your icon library. It inherits the callout’s color through currentColor and is sized to 16px, so icons drawn on a 24×24 viewBox need no extra styling.

The icon keeps its own column and centers on the first line, so a message that wraps stays aligned instead of running underneath it. Placing Callout.Icon after Callout.Text moves it to the end of the row — because the text fills the row, a trailing icon sits against the far edge rather than right after the last word.

Changes are saved automatically as you type.

We couldn't process your payment. Update your card to keep your subscription active, or your workspace will be paused at the end of the billing period.

<Callout.Root>
  <Callout.Icon>
    <InfoIcon />
  </Callout.Icon>
  <Callout.Text>Changes are saved automatically as you type.</Callout.Text>
</Callout.Root>

<Callout.Root color="danger">
  <Callout.Icon>
    <AlertIcon />
  </Callout.Icon>
  <Callout.Text>
    We couldn't process your payment. Update your card to keep your subscription active.
  </Callout.Text>
</Callout.Root>

The icon is hidden from screen readers, so it must not be the only thing carrying a meaning — a warning triangle next to text that never says anything is wrong announces as nothing at all.

Rich content

Callout.Text takes arbitrary JSX, so a message can hold emphasis, links, or a nested list. Text inherits the callout’s color through the cascade.

Heads up. Deleting a workspace also deletes every project inside it. This can't be undone.

<Callout.Root color="warning">
  <Callout.Icon>
    <AlertIcon />
  </Callout.Icon>
  <Callout.Text>
    <strong>Heads up.</strong> Deleting a workspace also deletes every project inside it. This can't
    be undone.
  </Callout.Text>
</Callout.Root>

Announcing a callout

A callout that is on the page from the start needs no role. One that appears in response to a user action should announce itself: pass role="status" for informational messages, or role="alert" for errors that interrupt the user.

<Callout.Root role="alert" color="danger">
  <Callout.Text>{error}</Callout.Text>
</Callout.Root>

Keep the callout mounted and swap its text rather than mounting it alongside the message — a live region that is already on the page announces reliably, while one that appears with its text already in place may be missed.

API Reference

Callout.Root

Prop	Type	Default
children?	ReactNode	—
id?	string	—
className?	string	—
color?	"default" | "success" | "warning" | "danger"	default
role?	string	—
ref?	Ref<HTMLDivElement>	—

Callout.Icon

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—

Callout.Text

Prop	Type	Default
children?	ReactNode	—
className?	string	—
ref?	Ref<HTMLDivElement>	—