Callout

v0.2.5

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 supports two visual styles, each available in seven semantic colors.

Solid

High-contrast filled background with inverted text. Use for critical or high-priority messages that need immediate visual weight.

Off-black

The default Callout color — rendered when no color prop is set. Use for high-emphasis messages that don't fit semantic categories.

Accent

Neutral

Info

Danger

Warning

Success

Outline

Subtle bordered container with semantic text color. Use for lower-priority contextual information that should not compete visually with surrounding content.

Off-black

Accent

Neutral

Info

Danger

Warning

Success

Common Patterns

As Child

Use asChild to render the callout as a different HTML element while preserving all styling.

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 — it has no interactive controls and adds no keyboard interactions of its own. If you place links inside CalloutText, standard browser focus behaviour applies. Place buttons as siblings within CalloutRoot rather than inside CalloutText, since CalloutText renders a <p> element and nesting a <button> inside a <p> is invalid HTML.

ARIA attributes

• 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. If the icon carries unique meaning not covered by text, expose it via a visually hidden <span> inside CalloutText rather than aria-label on the icon wrapper.
• 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.

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