Callout

Usage

import {
  Callout,
  CalloutAction,
  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

With a title

Rich content

With actions

CalloutAction is a small Button preset. Drop it in as a child; the callout spaces it under the text.

API Reference

Callout

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 wifi_off for an offline state.

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.