Callout

A message the reader should see in the page, without being made to answer it.

import { Callout, Stack } from "@hackcove/ui";

<Stack gap="sm">
  <Callout tone="info">The import runs overnight.</Callout>
  <Callout tone="warn" title="3 uncategorised.">
    Sort them before the month closes.
  </Callout>
</Stack>

import { Callout, Stack } from "@hackcove/ui";

<Stack gap="sm">
  <Callout tone="danger">The import runs overnight.</Callout>
  <Callout tone="danger" title="3 uncategorised.">
    Sort them before the month closes.
  </Callout>
</Stack>

import { Button, Callout } from "@hackcove/ui";

<Callout
  tone="warn"
  title="Import failed."
  actions={
    <Button size="sm" variant="outline">
      Retry
    </Button>
  }
>
  The last file did not finish.
</Callout>

import { Button, Callout } from "@hackcove/ui";

<Callout tone="warn" title="Import failed.">
  The last file did not finish. <Button size="sm">Retry</Button>
</Callout>

• Pick the tone by how much the message matters: neutral for a note, info (the default) for something worth knowing, positive for a result, warn for a thing to check before going on, danger for a failure or something that cannot be undone. Keep danger for the real failure.
• Add a title for a short bold lead-in; the body carries the detail.
• Put the one action in actions, at the end of the row: a Button size="sm" or a TextLink stretch, which makes the whole callout the click target.
• banner is the flat strip at the top of a Card flush; do not use it anywhere else.
• A message that must be answered before the reader goes on is a Dialog; a field's own error is the error of its Field.

• A Callout is a plain <div> with no role and no live region, so a screen reader does not announce it when it appears; the tone is colour and text, so say what happened in the words.
• A title is a bold paragraph, not a heading, so it adds nothing to the heading outline.
• Buttons and links in actions keep their own focus ring and keyboard behaviour.