Callout

A visual message component to attract user's attention.

Anatomy

Import and assemble the component:

1import { Callout } from '@raystack/apsara'
2

3<Callout />

Usage

Start with the color, then decide how much attention the callout should draw and what the reader can do with it.

Color

color carries the meaning: neutral (the default) for general information, primary for the base background, and success, attention, danger, and accent for status. Pick the color from what the message means. A danger callout has the alert role.

1<Flex gap={5} direction="column">
2  <Callout color="neutral">Neutral Callout</Callout>
3  <Callout color="success">Success Callout</Callout>
4  <Callout color="danger">Danger Callout</Callout>
5  <Callout color="gradient">Gradient Callout</Callout>
6  <Callout color="accent">Accent Callout</Callout>
7  <Callout color="attention">Attention Callout</Callout>
8  <Callout color="primary">Primary Callout</Callout>
9</Flex>

Outline

solid (the default) fills the callout. outline draws a border instead, which is quieter for a page that already has several filled surfaces.

1<Flex gap={5} direction="column">
2  <Callout color="success">Without Outline Callout</Callout>
3  <Callout color="success" variant="outline">
4    With Outline Callout
5  </Callout>
6</Flex>

High contrast

highContrast deepens the text and background so the callout holds up against a busy or colored page.

1<Flex gap={5} direction="column">
2  <Callout color="danger">Normal Callout</Callout>
3  <Callout color="danger" highContrast>
4    High Contrast Callout
5  </Callout>
6</Flex>

Dismissible

Set dismissible and pass onDismiss to add a close button. Use it for messages the reader can act on and clear, not for errors that still need fixing. consumer controls removal (the callout stays mounted); when it is omitted, the callout hides itself.

1<Callout dismissible onDismiss={() => alert("Dismissed!")}>
2  Dismissible Callout
3</Callout>

With action

The Callout component can include an action button:

1<Callout color="success" action={<Button>Action</Button>}>
2  A short message to attract user's attention
3</Callout>

API Reference

Renders a highlighted message block for tips, warnings, or information.

Prop

Type

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

SlotElement
callout-transitionThe outer transition shell <div> that plays the enter and exit animation
callout-transition-bodyThe <div> that animates during the enter/exit transition
calloutThe main callout <div> (role status, or alert for the danger color)
callout-containerWrapper <div> holding the message and actions
callout-message-containerWrapper <div> around the icon and message
callout-iconWrapper around the icon (when an icon is set)
callout-messageWrapper around the message content
callout-actionsWrapper <div> for the action and dismiss button
callout-actionWrapper around the action (when an action is provided)
callout-dismissThe dismiss (close) button (when dismissible)

Accessibility

The Callout component includes appropriate ARIA attributes for accessibility:

  • Uses semantic HTML elements for proper structure
  • Dismiss button includes aria-label for screen readers
  • Interactive elements are keyboard accessible
  • Dismiss button shows a visible focus ring on keyboard focus