Callout

A documentation admonition — left-ruled, tinted block for a note, tip, caution, or warning. The one place a coloured left-border is on-brand (it's a doc convention, applied with restraint).

jsx

<Callout kind="note">Secrets are resolved through <code>secret://</code> references, never literals.</Callout>
<Callout kind="warning" title="Cost">A single Deep Research task costs ≈ £1.58.</Callout>
<Callout kind="danger" title={null}>The IR contains full prompts verbatim.</Callout>

Kinds: note (navy) · tip (green) · warning (cognac) · danger (red). title overrides the default; null hides it.

Preview

Declarations

TypeScript

export interface CalloutProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
  /** Admonition kind — sets colour and default title. */
  kind?: 'note' | 'tip' | 'warning' | 'danger';
  /** Heading; pass null to hide, omit for the kind's default. */
  title?: React.ReactNode | null;
  /** Optional leading icon element. */
  icon?: React.ReactNode;
  className?: string;
  children?: React.ReactNode;
}

/**
 * A documentation admonition — a left-ruled, tinted block for a note, tip,
 * caution, or warning. The suite's docs lean on these heavily.
 */
export function Callout(props: CalloutProps): React.JSX.Element;