Callouts

Callouts are used to draw attention to important information within your documentation. They come in four variants to convey different levels of importance.

Overview

Each callout variant uses a distinct colour scheme and icon to immediately communicate its purpose to the reader.

Variants

Info

This is an informational callout. Use it to provide additional context or helpful tips that enhance understanding.

Warning

This is a warning callout. Use it to alert readers about potential issues or deprecated features they should be aware of.

Success

This is a success callout. Use it to confirm that an action was completed successfully or to highlight best practices.

Destructive

This is a destructive callout. Use it to warn about breaking changes, data loss, or actions that cannot be undone.

With titles

Add a title prop for extra context:

Good to know

You can combine callouts with other documentation components like code blocks and lists for richer content.

Deprecation notice

The legacyMode prop will be removed in the next major version. Please migrate to the new API before upgrading.

Migration complete

All components have been updated to use the new design tokens. No further action is required.

Breaking change

The getData() function now returns a Promise. Update all call sites to use await.

Usage

Example usage

import { Callout } from "@/components/docs/callout"

export function MyPage() {
  return (
    <>
      <Callout variant="info" title="Did you know?">
        Callouts support any React children, including
        <code>code</code>, <strong>bold text</strong>,
        and links.
      </Callout>

      <Callout variant="warning">
        Without a title, the callout displays only
        the content alongside the icon.
      </Callout>
    </>
  )
}