feedback / stable

Callout

Inline contextual feedback: set tone, optional title, and description or children. Place follow-up controls in actions; nest Checklist with items for completion requirements.

LIVE PREVIEW

Loading preview…

When to use

Explain a recoverable issue or contextual status in a page or record drawer.
Explain completion requirements with Checklist items and actions; bind onDismiss when the message can be cleared.

Consider an alternative

Transient feedback: use Toaster.
An interrupting confirmation: use AlertDialog.
User-owned toggles: use Checkbox instead of Checklist.

Import

import { Callout } from '@revido-llc/kit';

Keyboard interaction

Tab — focus actions and dismiss.
Enter / Space — toggle details, done groups and actions; Enter — follow links.

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


actions	ReactNode	—	Kit Buttons, ordered secondary first and primary last.
collapseLabel	string	"Hide details"	Accessible name of the disclosure button while the details are shown (it collapses them). Pass a translation for non-English UIs.
collapsible	boolean	—	Collapse long supporting content into a single header.
defaultExpanded	boolean	—
density	"default" \| "compact"	—
description	ReactNode	—
dismissLabel	string	"Dismiss message"	Accessible name of the dismiss button. Pass a translation for non-English UIs.
expandLabel	string	"Show details"	Accessible name of the disclosure button while the details are hidden (it expands them). Pass a translation for non-English UIs.
icon	LucideIcon	—	Override the tone's glyph, or pass null for a quiet message.
isExpanded	boolean	—
onDismiss	(() => void)	—
onExpandedChange	((expanded: boolean) => void)	—
persistenceKey	string	—	Viewer-scoped key supplied by the app; storage denial never blocks disclosure.
summary	ReactNode \| ((state: { isExpanded: boolean; setExpanded: (expanded: boolean) => void; }) => ReactNode)	—	Header content beside the title: progress, compact chips, or other concise context.
title	ReactNode	—
tone	CalloutTone	—
children	ReactNode	—
className	string	—

Related exports

Checklist, ChecklistProgress

Examples

Tones

<Callout tone="warning" title="Requirements missing">Complete the handoff to continue.</Callout>

Without title · compact

<Callout tone="success" density="compact" description="Preview link saved." />

Actions and dismiss

<Callout tone="info" title="Preview available" onDismiss={dismiss} actions={<Button href={previewUrl}>Open preview</Button>}>Review the latest changes.</Callout>

Long title in a narrow container

Titles wrap rather than truncate. Below the sm container width the actions move to their own line under the title, primary last.

<Callout tone="warning" density="compact" title="Classify this report as a bug or new scope before it is assigned to the team" actions={<><Button variant="secondary" size="sm">Not now</Button><Button size="sm">Review</Button></>} />

Narrow container with every control

Actions, details toggle and dismiss stay in one group in reading order; below the sm container width the group takes its own line under the title.

<Callout tone="warning" density="compact" collapsible onDismiss={dismiss} title="Classify this report as a bug or new scope before it is assigned to the team" actions={<><Button variant="secondary" size="sm">Not now</Button><Button size="sm">Review</Button></>}>Bugs go to the repair queue.</Callout>

Transition requirements · collapsed

<Callout tone="warning" collapsible defaultExpanded={false} title="Ready for QA Review — 2 to go" summary={<ChecklistProgress {...getChecklistSummary(requirements)} />}>
  <Checklist items={requirements} grouped />
</Callout>

Transition requirements · expanded

<Callout tone="warning" collapsible defaultExpanded={true} title="Ready for QA Review — 2 to go" summary={<ChecklistProgress {...getChecklistSummary(requirements)} />}>
  <Checklist items={requirements} grouped />
</Callout>

Literal requirements

Render requirement states from JSON data; use href for an editing destination.

<Checklist items={[{ id: "preview", label: "Preview link", state: "missing", href: "/preview" }, { id: "criteria", label: "Acceptance criteria", state: "done" }]} />

Literal progress

Pass done and total counts from getChecklistSummary(items) to show readiness progress.

<ChecklistProgress done={2} total={3} />