Callout

A note, a tip, an important point, a warning or a caution.

Preview

src/examples/callout/example.astro

---
import { Callout } from "@/presentation/components/site/callout";
---

<Callout kind="tip">Run the build before you push, so a broken link never reaches the site.</Callout>

Add to your site

npx docs-sitekit add callout

It writes these files, and keeps a file you changed:

src/presentation/components/site/callout.tsx

It requires these entries of the registry, which add restores first:

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of Callout
Key	Type	Default	Allowed values	Description
`kind`	string	"note"	"note", "caution", "important", "tip", "warning"	Which of the five: note, tip, important, warning or caution. It sets the icon, the label and the tone.
`title`	string	-	-	A title that replaces the name of the kind.
`children`	string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<AwaitedReactNode>	required	-	The text of the callout.
`className`	string	-	-	Classes added to the callout.

Variants and states

The five kinds

Note, tip, important, warning and caution. The same five come from markdown as > [!NOTE] and the others.

src/examples/callout/kinds.astro

---
import { Callout } from "@/presentation/components/site/callout";
---

<div class="space-y-3">
  <Callout kind="note">A note for the reader.</Callout>
  <Callout kind="tip">A tip that saves time.</Callout>
  <Callout kind="important">Something the reader needs to know.</Callout>
  <Callout kind="warning">Something that can go wrong.</Callout>
  <Callout kind="caution">Something that can cause harm.</Callout>
</div>

With a title

A title replaces the name of the kind.

src/examples/callout/title.astro

---
import { Callout } from "@/presentation/components/site/callout";
---

<Callout kind="warning" title="Before you upgrade">Commit your changes first.</Callout>

About

A highlighted note inside a page, with five kinds. The same five also come from markdown as > [!NOTE] and the others, see Callouts; both look the same.

Accessibility

It is an <aside> with role="note", and it is a note, not an alert: nothing is announced when it appears.
The kind is written in the text (Note, Tip, Important, Warning, Caution), so the color of the edge and of the label is not the only cue.
The icon is aria-hidden.
The tones are the tokens brand, success, warn, fg-bright and destructive, and the label uses the same tone as the edge. All reach AA on the callout in both themes.

Source

callout.tsx

Edit this page

Last updated 5 November 2026