Callout

Basic Example

<Callout variant="info" title="Heads up">
  This is an informational message for the user.
</Callout>

All Variants

Four semantic variants cover the most common dashboard alert scenarios. Each has a distinct icon, border color, and background tint.

<Callout variant="info" title="Info">...</Callout>
<Callout variant="warning" title="Warning">...</Callout>
<Callout variant="success" title="Success">...</Callout>
<Callout variant="error" title="Error">...</Callout>

Data-Driven Rules

Pass a value and rules array to let the Callout auto-select its variant and message. Rules are evaluated top-to-bottom; first match wins. Use {value} in title or message for interpolation.

<Callout
  value={85}
  rules={[
    { min: 90, variant: "success", title: "Excellent", message: "Score: {value}." },
    { min: 70, max: 90, variant: "info", title: "Good", message: "Score: {value}." },
    { min: 50, max: 70, variant: "warning", title: "Degraded", message: "Score: {value}." },
    { max: 50, variant: "error", title: "Critical", message: "Score: {value}." },
  ]}
/>

Metric Callout

The metric prop embeds a formatted numeric value inside the callout, using the same format engine as KpiCard (currency, percent, compact, etc.).

<Callout
  variant="success"
  title="Revenue milestone reached"
  metric={{ value: 1000000, format: "currency", label: "total revenue" }}
>
  Your team crossed the $1M revenue mark this quarter.
</Callout>

Collapsible Detail

Use detail to tuck verbose information behind a toggle. Great for error stack traces, service breakdowns, or audit logs.

<Callout
  variant="warning"
  title="3 services experiencing elevated latency"
  detail={
    <div className="space-y-1">
      <p>API Gateway: p99 latency 450ms (threshold: 200ms)</p>
      <p>Auth Service: p99 latency 320ms (threshold: 150ms)</p>
      <p>Search: p99 latency 280ms (threshold: 100ms)</p>
    </div>
  }
>
  Some services are responding slower than expected.
</Callout>

Action Button

The action prop adds a button to the callout for inline user actions like retrying a failed operation or navigating to a detail view.

<Callout
  variant="error"
  title="Payment failed"
  action={{ label: "Retry payment", onClick: () => alert("Retrying...") }}
>
  The last payment attempt was declined.
</Callout>

Props

Data Shape

interface CalloutRule {
  min?: number;     // Minimum value (inclusive). Omit for fallback.
  max?: number;     // Maximum value (exclusive). Omit for no upper bound.
  variant: CalloutVariant;  // Variant to apply.
  title?: string;   // Title text. Supports {value} placeholder.
  message?: string; // Message text. Supports {value} placeholder.
  icon?: React.ReactNode;
}

interface CalloutMetric {
  value: number;
  format?: FormatOption;
  label?: string;
}

interface CalloutAction {
  label: string;
  onClick: () => void;
}

type CalloutVariant = "info" | "warning" | "success" | "error";

Notes

• Uses forwardRef — you can pass a ref to the root element.
• Rules are evaluated top-to-bottom; first match wins. Use {value} placeholder in title/message for interpolation.
• The metric prop uses the format engine — pass any FormatOption (currency, percent, compact, etc.).
• Dismissible callouts fade out with a 200ms animation before removing from the DOM.
• autoDismiss sets a timer in milliseconds; useful for transient success messages.
• Has role='alert' for screen readers.
• In MetricGrid, Callout takes full width automatically (__gridHint = 'full').
• The aiContext prop (inherited from BaseComponentProps) adds business context for AI Insights analysis. See the AI Insights guide for details.

Playground

Experiment with every prop interactively. Adjust the controls on the right to see the component update in real time.

<Callout
  variant="info"
  title="Heads up"
>
  This is an example callout message.
</Callout>

Related Components