ui/components/callout

Callout

Dismissible alert box with tone-driven coloring, frame variants (inline / rail / bar), and a compound API.

Preview

tsx

1 import { Callout } from "@/components/ui/callout";2 3 export default function CalloutDefault() {4   return (5     <Callout tone="info">6       <Callout.Icon />7       <Callout.Title>Information</Callout.Title>8       <Callout.Content>9         This is an informational callout with a title, body text, and a dismiss button — the full10         anatomy in one instance.11       </Callout.Content>12       <Callout.Dismiss />13     </Callout>14   );15 }16

Installation

$pnpm exec dgadd add ui/callout

[Installs to]src/components/ui/callout[Item]ui/callout

dgadd is not public on npm yet. Until the first release, pack @diffgazer/add from the repository and install that tarball into this app, which is what puts dgadd on pnpm exec.

UI components require Tailwind CSS v4. Local copy mode imports src/styles/styles.css; package mode uses @diffgazer/ui CSS once packages are available.

Usage

tsx

1 import { Callout } from "@/components/ui/callout";2 3 export default function CalloutDefault() {4   return (5     <Callout tone="info">6       <Callout.Icon />7       <Callout.Title>Information</Callout.Title>8       <Callout.Content>9         This is an informational callout with a title, body text, and a dismiss button — the full10         anatomy in one instance.11       </Callout.Content>12       <Callout.Dismiss />13     </Callout>14   );15 }16

Examples

Tones

Preview

tsx

1 import { Callout } from "@/components/ui/callout";2 3 export default function CalloutTones() {4   return (5     <div className="flex flex-col gap-4">6       <Callout tone="info">7         <Callout.Icon />8         <Callout.Title>Info</Callout.Title>9         <Callout.Content>Informational message with helpful details.</Callout.Content>10       </Callout>11 12       <Callout tone="success">13         <Callout.Icon />14         <Callout.Title>Success</Callout.Title>15         <Callout.Content>Operation completed successfully.</Callout.Content>16       </Callout>17 18       <Callout tone="warning">19         <Callout.Icon />20         <Callout.Title>Warning</Callout.Title>21         <Callout.Content>Please review before proceeding.</Callout.Content>22       </Callout>23 24       <Callout tone="error">25         <Callout.Icon />26         <Callout.Title>Error</Callout.Title>27         <Callout.Content>Something went wrong. Please try again.</Callout.Content>28       </Callout>29 30       <Callout tone="success">31         <Callout.Title>No icon</Callout.Title>32         <Callout.Content>33           Omit Callout.Icon and the icon column collapses — the title starts at the frame edge.34         </Callout.Content>35       </Callout>36     </div>37   );38 }39

Frames

Preview

tsx

1 import { Callout } from "@/components/ui/callout";2 3 export default function CalloutFrames() {4   return (5     <div className="flex flex-col gap-4">6       <Callout tone="info" frame="inline">7         <Callout.Icon />8         <Callout.Title>Inline frame (default)</Callout.Title>9         <Callout.Content>10           Hairline border at tone color with a subtle tone background.11         </Callout.Content>12       </Callout>13 14       <Callout tone="warning" frame="rail">15         <Callout.Icon />16         <Callout.Title>Rail frame</Callout.Title>17         <Callout.Content>18           2px inline-start rail at tone color, lightest visual weight.19         </Callout.Content>20       </Callout>21 22       <Callout tone="error" frame="bar">23         <Callout.Icon />24         <Callout.Title>Bar frame</Callout.Title>25         <Callout.Content>26           Neutral hairline border with a 4px tone marker bar — the heaviest of the three frames.27         </Callout.Content>28       </Callout>29     </div>30   );31 }32

Controlled visibility

Preview

tsx

1 "use client";2 3 import { useState } from "react";4 import { Callout } from "@/components/ui/callout";5 6 export default function CalloutControlled() {7   const [open, setOpen] = useState(true);8 9   return (10     <div className="flex flex-col gap-4">11       <Callout tone="warning" open={open} onOpenChange={setOpen}>12         <Callout.Icon />13         <Callout.Title>Controlled Callout</Callout.Title>14         <Callout.Content>15           Dismiss this callout, then use the button below to bring it back.16         </Callout.Content>17         <Callout.Dismiss />18       </Callout>19 20       <button21         type="button"22         onClick={() => setOpen(true)}23         className="font-mono text-sm text-muted-foreground hover:text-foreground transition-colors cursor-pointer"24       >25         [ show callout ]26       </button>27     </div>28   );29 }30

Custom icon

Preview

tsx

1 import { Callout } from "@/components/ui/callout";2 3 export default function CalloutCustomIcon() {4   return (5     <div className="flex flex-col gap-4">6       <Callout tone="info">7         <Callout.Icon>?</Callout.Icon>8         <Callout.Title>Custom Icon</Callout.Title>9         <Callout.Content>10           Pass any content as children to Callout.Icon to replace the default glyph.11         </Callout.Content>12       </Callout>13 14       <Callout tone="success">15         <Callout.Icon>★</Callout.Icon>16         <Callout.Title>Featured</Callout.Title>17         <Callout.Content>Icons can be any single character, emoji, or React node.</Callout.Content>18       </Callout>19     </div>20   );21 }22

API Reference

Callout

Name	Type	Default	Description
tone	"info" \| "warning" \| "error" \| "success"	"info"	Semantic tone — drives color and default icon.
frame	"inline" \| "rail" \| "bar"	"inline"	Visual frame: inline border, inline-start rail, or marker bar.
open	boolean	—	Controlled visibility state. Pair with onOpenChange.
defaultOpen	boolean	true	Initial visibility state for uncontrolled usage.
onOpenChange	(open: boolean) => void	—	Called when Callout.Dismiss closes the callout or controlled state should change.
live	boolean	false	Opt into role="status" (or role="alert" for tone="error") for live-region announcement.
toneLabel	string	tone name	Screen-reader tone word announced before the content.

Callout.Icon

Name	Type	Default	Description
children	ReactNode	tone icon	Custom icon content (character, emoji, or SVG). The icon is decorative and aria-hidden.

Callout.Title

Name	Type	Default	Description
childrenrequired	ReactNode	—	Title text for the callout.

Callout.Content

Name	Type	Default	Description
childrenrequired	ReactNode	—	Body content for the callout.

Callout.Dismiss

Name	Type	Default	Description
children	ReactNode	"[x]"	Custom dismiss button content.

Accessibility

Notes

Compound Components

Compose Callout.Icon, Callout.Title, Callout.Content, and Callout.Dismiss as children. Each part inherits the tone from the root Callout via context.

Frame variants

frame="inline" (default): hairline border at tone color + subtle tone bg. frame="rail": no border, 2px inline-start rail at tone color. frame="bar": neutral border + 4px tone marker bar.

Default icons

Each tone ships a default character glyph (i / ! / ✕ / ✓), the same icon language Toast uses. Pass children to Callout.Icon to override with any ReactNode, including an SVG.

Dismissible

Add Callout.Dismiss as a child to show a close button. In uncontrolled mode the callout self-dismisses. For controlled mode, pass open and onOpenChange to the root Callout.

Accessibility

Static callouts have no role. Pass live to opt into role="status" (or role="alert" for tone="error") so assistive tech announces the message. A visually-hidden tone prefix ("Warning:", "Error:", …) is always rendered so the message is unambiguous without color.

Source

Install via CLI: pnpm exec dgadd add ui/callout. Keyboard hooks are included as standalone copies. For the full experience, use --integration keys.

Highlighted source loads after this disclosure opens. Browse the source repository.

Callout

Installation

Usage

Examples

Tones

Frames

Controlled visibility

Custom icon

API Reference

Callout

Callout.Icon

Callout.Title

Callout.Content

Callout.Dismiss

Accessibility

Notes

Compound Components

Frame variants

Default icons

Dismissible

Accessibility

Source

View component source (21 files)