Callout

A note inside the content, tinted by how much it matters.

import { Callout } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function CalloutBasic() {
  return (
    <Preview block={true}>
      <Callout.Root>
        <Callout.Title>Neutral</Callout.Title>
        Description
      </Callout.Root>
      <Callout.Root tone="warning">
        <Callout.Title>Warning</Callout.Title>
        Description
      </Callout.Root>
      <Callout.Root tone="danger">
        <Callout.Title>Danger</Callout.Title>
        Description
      </Callout.Root>
    </Preview>
  );
}

danger for a failure the reader is looking at, warning for something to fix, neutral for context.
Never put a callout above a whole page; it belongs next to the thing it explains.
Callout.Title is optional and takes the tone’s colour.
danger sets role="alert", so screen readers announce it.

API

PropType

tone?"neutral" | "warning" | "danger"

Type"neutral" | "warning" | "danger"

Default"neutral"

Parts: Root, Title. Other props go to the native element: div for Root, p for Title.