Callout

v0.2.3

Ready for Production

Use Callout to surface important messages inline with content — system feedback, warnings, or guidance — without requiring user action. Built on Radix Slot with cva variants so color and emphasis adapt to semantic context out of the box.

Installation

npm install @pmi/catalyst-callout

import { CalloutRoot, CalloutIcon, CalloutText } from '@pmi/catalyst-callout';

Variants

Callout comes in two variants: solid uses a high-contrast filled background with inverted text for critical or high-priority messages, while outline uses a subtle bordered container with semantic text color for lower-priority contextual information.

Default

Danger

Info

Neutral

Accent

As Child

Warning

Success

Custom

API Reference

CalloutRoot

Extends React.HTMLAttributes<HTMLDivElement> — supports role, aria-live, aria-label, and all standard div attributes.

CalloutIcon

Extends React.HTMLAttributes<HTMLDivElement>. Add aria-hidden="true" when the adjacent CalloutText already conveys the meaning.

CalloutText

Extends React.HTMLAttributes<HTMLParagraphElement>.

Accessibility

Keyboard Interactions

Callout is a static, non-interactive component by default — it has no keyboard interactions of its own. If you place focusable elements (links, buttons) inside CalloutText, standard browser focus behaviour applies.

ARIA

• Color is never the sole indicator — always pair color with an icon, descriptive text, or both.
• Add role="alert" on CalloutRoot for urgent messages that must be announced immediately by screen readers.
• Add role="status" + aria-live="polite" for non-urgent status updates (e.g. "Changes saved").
• Use aria-hidden="true" on CalloutIcon when the adjacent CalloutText fully conveys the meaning; only provide aria-label when the icon carries unique meaning not covered by text.
• All color combinations meet WCAG 2.2 AA 4.5:1 contrast ratio for normal text.

See the WCAG 2.2 — Status Messages (4.1.3) and the APG Alert Pattern for inherited behaviour and the Catalyst Accessibility Testing Guide for testing recommendations.

Choosing the Right Component

Use Callout when you need to surface a contextual, inline message that is always visible — no user action required. Reach for a different primitive when:

Related

• Alert
• Banner
• Toast
• Badge