Callout

A visual message component to attract user's attention.

Usage

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

Callout Props

Prop

Type

Examples

Type

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

1<Flex gap="medium" 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

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

1<Flex gap="medium" direction="column">
2  <Callout type="success">Without Outline Callout</Callout>
3  <Callout type="success" outline>
4    With Outline Callout
5  </Callout>
6</Flex>

High Contrast

The Callout component supports high contrast mode for better visibility:

1<Flex gap="medium" direction="column">
2  <Callout type="alert">Normal Callout</Callout>
3  <Callout type="alert" highContrast>
4    High Contrast Callout
5  </Callout>
6</Flex>

Dismissible

The Callout component can be made dismissible:

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>

Custom Width

The Callout component supports custom width:

1<Callout type="success" width={500}>
2  A short message to attract user's attention
3</Callout>

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