Skip to main content

​
Import

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

​
Usage

<Callout>
  This is a basic callout message.
</Callout>

​
Types

<Callout type="grey">
  Grey callout for general information.
</Callout>

<Callout type="success">
  Success callout for positive feedback.
</Callout>

<Callout type="alert">
  Alert callout for warnings or errors.
</Callout>

<Callout type="attention">
  Attention callout for important notices.
</Callout>

<Callout type="accent">
  Accent callout for highlighted information.
</Callout>

<Callout type="gradient">
  Gradient callout for special emphasis.
</Callout>

<Callout type="normal">
  Normal callout with minimal styling.
</Callout>

​
With custom icon

import { CheckCircledIcon } from '@radix-ui/react-icons';

<Callout icon={<CheckCircledIcon />} type="success">
  Task completed successfully!
</Callout>

​
Without icon

<Callout icon={null}>
  Callout without an icon.
</Callout>

​
Outline variant

<Callout type="accent" outline>
  This callout has an outline style.
</Callout>

​
High contrast

<Callout type="success" highContrast>
  High contrast callout for better visibility.
</Callout>

​
With action

<Callout 
  type="alert"
  action={
    <button onClick={() => console.log('Action clicked')}>
      View Details
    </button>
  }
>
  Action required. Please review the details.
</Callout>

​
Dismissible

const [isVisible, setIsVisible] = useState(true);

if (!isVisible) return null;

return (
  <Callout
    dismissible
    onDismiss={() => setIsVisible(false)}
  >
    This callout can be dismissed.
  </Callout>
);

​
Custom width

<Callout width={400}>
  Callout with fixed width of 400px.
</Callout>

<Callout width="50%">
  Callout with 50% width.
</Callout>

​
Complex content

<Callout type="gradient">
  <div>
    <strong>New Feature Available</strong>
    <p>Check out our latest updates and improvements.</p>
  </div>
</Callout>

​
API reference

​
Callout

​
type
'grey' | 'success' | 'alert' | 'gradient' | 'accent' | 'attention' | 'normal'
default:"'grey'"
The visual style variant of the callout.
​
outline
boolean
When true, displays the callout with an outline style instead of filled background.
​
highContrast
boolean
When true, increases the contrast for better visibility.
​
icon
React.ReactNode
Custom icon to display. Defaults to InfoCircledIcon. Pass null to hide the icon.
​
action
React.ReactNode
Optional action element (like a button or link) to display on the right side.
​
dismissible
boolean
When true, shows a dismiss button that allows users to close the callout.
​
onDismiss
() => void
Callback function called when the dismiss button is clicked. Required when dismissible is true.
​
width
string | number
Custom width for the callout. Can be a number (px) or string (e.g., “50%”, “400px”).
​
className
string
Additional CSS class names to apply to the callout.
​
style
CSSProperties
Inline styles to apply to the callout container.
​
children
React.ReactNode
required
The content to display inside the callout.