Callout

Highlight a note, warning, or error inline with the content.

A callout draws attention to a short piece of information. It has an icon that marks its type, an optional title, and a body that accepts any Markdown or MDX.

Usage#

Default callout

Callouts without a type use the informational style.

mdx

<Callout title="Default callout">
  Callouts without a `type` use the informational style.
</Callout>

Types#

Info

Use info for context, tips, and links to related pages.

Warning

Use warn for actions that are easy to get wrong or have side effects.

Error

Use error for destructive operations and breaking changes.

Success

Use success to confirm that a step finished or a feature is available.

mdx

<Callout type="info" title="Info">
  Use `info` for context, tips, and links to related pages.
</Callout>

<Callout type="warn" title="Warning">
  Use `warn` for actions that are easy to get wrong or have side effects.
</Callout>

<Callout type="error" title="Error">
  Use `error` for destructive operations and breaking changes.
</Callout>

<Callout type="success" title="Success">
  Use `success` to confirm that a step finished or a feature is available.
</Callout>

Without a title#

The title is optional. A callout with only a body still gets the colored edge and icon.

mdx

<Callout type="warn">
  The title is optional. A callout with only a body still gets the colored edge and icon.
</Callout>

Props#

Prop	Type	Default	Description
`type`	`"info" \| "warn" \| "error" \| "success"`	`"info"`	Picks the accent color and icon.
`title`	`ReactNode`	none	Heading rendered above the body.
`children`	`ReactNode`	required	Body content. Markdown inside is rendered normally.

Importing outside MDX#

Inside MDX the component is available without an import. In a React file, import it from the mdx entry:

tsx

import { Callout } from "pzzadocs/mdx";

export function Notice() {
  return <Callout type="info" title="Heads up">Rendered from a React component.</Callout>;
}