Callout

Callout

Inline alert/notification banner with icon and variant colors. Also exports pre-configured variants: SuccessCallout, ErrorCallout, WarningCallout, InfoCallout.

Import

import { Callout, SuccessCallout, ErrorCallout, WarningCallout, InfoCallout } from 'reablocks';

Callout Props

Basic Usage

<Callout text="This is an informational message" variant="info" icon={<InfoIcon />} />
<Callout text="Operation completed" variant="success" icon={<CheckIcon />} />
<Callout text="Something went wrong" variant="error" icon={<ErrorIcon />} />
<Callout text="Please be careful" variant="warning" icon={<WarningIcon />} />

Pre-configured Variants

<SuccessCallout text="Saved successfully" />
<ErrorCallout text="Failed to save" />
<WarningCallout text="Unsaved changes" />
<InfoCallout text="New version available" />

CalloutTheme Interface

interface CalloutTheme {
  base: {
    common: string;   // Shared base styles (padding, border-bottom)
    variant: {         // Per-variant background and border colors
      default: string;
      success: string;
      error: string;
      warning: string;
      info: string;
    };
  };
  icon: {
    common: string;    // Shared icon styles
    variant: {         // Per-variant icon colors
      default: string;
      success: string;
      error: string;
      warning: string;
      info: string;
    };
  };
  text: string;        // Text styles
}