Callout

Installation

Usage

Callout is a static, block-level feedback container. It renders a soft tinted background with matching semantic text color, so feedback stays gentle and consistent.

import { Callout } from "@/ui";

export default function CalloutBasicDemo() {
  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <Callout variant="info">A block-level note for descriptions and feedback.</Callout>
      <Callout variant="success">Saved successfully. Your changes are live.</Callout>
      <Callout variant="warning">Your session expires in 5 minutes.</Callout>
      <Callout variant="danger">Upload failed. Check your connection and retry.</Callout>
    </div>
  );
}

• info (default) — neutral notices and descriptions
• success — positive results
• warning — cautionary hints
• danger — failures and danger feedback

For short inline state marks use Chip; for inline actions use a text Button.

Validation feedback below a form control is a Callout too — variant="danger" with role="alert"; Form / FormItem render their error line this way.

API Reference

Callout