Callout
A Callout is a container that displays a message or notification
Basic Usage
A Callout is a container that displays a message or notification
import { Callout, CalloutTitle, CalloutDescription } from "@epilot/volt-ui"
<Callout variant="info">
<CalloutTitle>Info</CalloutTitle>
<CalloutDescription>This is an information message.</CalloutDescription>
<CalloutAction>
<Button variant="secondary">Close</Button>
</CalloutAction>
</Callout>Custom Icon
You can provide a custom icon to replace the default variant icon using the customIcon prop.
import { Callout, CalloutTitle, CalloutDescription } from "@epilot/volt-ui"
import { IconInfoCircle } from "@tabler/icons-react"
<Callout customIcon={<IconInfoCircle className="size-5" />}>
<CalloutTitle>Custom Icon</CalloutTitle>
<CalloutDescription>This callout uses a custom icon from Tabler Icons.</CalloutDescription>
</Callout>
// Hide icon completely
<Callout variant="warning" hideIcon>
<CalloutTitle>No Icon</CalloutTitle>
<CalloutDescription>Use hideIcon prop to hide the icon completely.</CalloutDescription>
</Callout>API Reference
Callout
The main container component that displays a message or notification. It provides context to child components and supports different visual variants.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "gray" | "success" | "warning" | "destructive" | "info" | The visual variant of the callout. Determines the background color and text color. |
className | string | - | Additional CSS classes to apply to the callout container. |
hideIcon | boolean | false | Whether to hide the icon completely. |
customIcon | React.ReactNode | - | A custom icon element to replace the default variant icon. |
Note: The component automatically sets role="alert" for accessibility.
CalloutTitle
Displays the title or heading of the callout message. Automatically aligns with the content area when an icon is present.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply to the title. |
CalloutDescription
Displays the main content or description of the callout message. Automatically aligns with the content area when an icon is present.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes to apply to the description. |
CalloutAction
A container for action buttons or links within the callout. Supports alignment options and automatically adjusts spacing when an icon is present.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" | "end" | "start" | The horizontal alignment of the action content. |
className | string | - | Additional CSS classes to apply to the action container. |