CalloutA visual message component to attract user's attention.

A short message to attract user's attention

Install the component from your command line.

npm install @raystack/apsara

Import and usage.

import { Callout } from '@raystack/apsara/v1'

<Callout type="success">A short message to attract user's attention</Callout>

The Callout component accepts the following props:

type: Visual style variant ("grey" | "success" | "alert" | "gradient" | "accent" | "attention" | "normal", default: "grey")
outline: Whether to show an outline border (boolean, default: false)
highContrast: Whether to use high contrast colors (boolean, default: false)
action: Optional action element to display on the right
dismissible: Whether to show a dismiss button (boolean, default: false)
onDismiss: Callback function when dismiss button is clicked
width: Custom width for the callout
className: Additional CSS class names
All other HTMLDivElement attributes from React

The Callout component offers different type options. You can customize the visual style using the type prop:

The Callout component can be rendered with or without an outline border:

The Callout component supports high contrast mode for better visibility:

The Callout component can include an action button:

The Callout component can be made dismissible:

The Callout component supports custom width:

The Callout component includes appropriate ARIA attributes for accessibility: