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').

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