Callout
An inline message box used for status, warnings, and announcements.
Your changes have been saved.
Usage
import {
Callout,
CalloutAction,
CalloutActions,
CalloutDescription,
CalloutTitle,
} from '@epilot/spark-ui/callout'<Callout variant="info">
<CalloutTitle>Update available</CalloutTitle>
<CalloutDescription>A new firmware version is ready.</CalloutDescription>
<CalloutAction>Install</CalloutAction>
</Callout>Examples
All variants
Information about the system.
Operation completed successfully.
Heads up: review before continuing.
Something went wrong.
Your next meter reading is due in 5 days.
With a title
A new firmware version is ready to install.
Rich content
Review the updated terms before June 30.
With actions
CalloutAction is a small Button preset. Drop it in as a child; the callout spaces it under the text.
Review the updated terms before June 30.
With two actions
Wrap two CalloutActions in CalloutActions so they sit side by side. Pass primary on the main action (retry, reload).
The manufacturer cloud is temporarily unreachable.
API Reference
Callout
| Prop | Type | Default |
|---|---|---|
variant | "info" | "success" | "warning" | "error" | "neutral" | "info" |
icon | SparkIcon | false | variant default |
className | string |
Renders a div and forwards all React.HTMLAttributes<HTMLDivElement> (e.g. role). The variant picks the icon by default; pass icon to override just the glyph (the variant's color is kept), e.g. an error callout showing WifiOff for an offline state. Pass icon={false} for a callout with no icon at all.
Use neutral for a message that carries no severity — an announcement or an information panel that should not read as blue. It takes the gray equivalents of the other variants' tokens, and pairs with icon={false} for a plain panel.
CalloutTitle
Renders a span with title styling. Forwards all span HTML attributes plus className.
CalloutDescription
Renders a p with body styling. Forwards all paragraph HTML attributes plus className; links, strong, and other inline markup work as children.
CalloutAction
A Button preset with callout spacing baked in. It accepts all HTML button props.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "start" | "end" (horizontal placement within the callout) | "start" | Horizontal alignment when the action is a direct child of Callout. |
primary | boolean | false | Filled solid look. Use on the main action in a CalloutActions row (retry, reload). |
CalloutActions
A horizontal row for two or more CalloutActions. Renders a div and forwards HTML attributes plus className. Single actions can stay a direct CalloutAction child.