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 type, then decide how much attention the callout should draw and what the reader can do with it.

Type

Type carries the meaning: grey for neutral information, and the semantic types for success, warning, danger, and accent. Pick the type from what the message means, not from the color you want.

1<Flex gap={5} direction="column">
2  <Callout type="grey">Default Callout</Callout>
3  <Callout type="success">Success Callout</Callout>
4  <Callout type="alert">Alert Callout</Callout>
5  <Callout type="gradient">Gradient Callout</Callout>
6  <Callout type="accent">Accent Callout</Callout>
7  <Callout type="attention">Attention Callout</Callout>
8  <Callout type="normal">Normal Callout</Callout>
9</Flex>

Outline

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

1<Flex gap={5} direction="column">
2  <Callout type="success">Without Outline Callout</Callout>
3  <Callout type="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 type="alert">Normal Callout</Callout>
3  <Callout type="alert" 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 type="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 alert type)
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