Callout

A tinted panel that lifts a note out of the surrounding prose: an icon, an optional title, and its children. Purely presentational; no data binding.

Heads up

Callouts pull a note out of the flow of the page: an icon, an optional title, and whatever you put inside.

<Callout variant="info" title="Heads up">
  Callouts pull a note out of the flow of the page: an icon, an optional
  title, and whatever you put inside.
</Callout>

Variants

Four intents, each with its own icon and accent color: info (the default), success, warning, and danger.

Shipped

The deploy went out cleanly.

Careful

This action can't be undone.

Stop

Credentials are missing. Nothing will run.

<Callout variant="success" title="Shipped">
  The deploy went out cleanly.
</Callout>
<Callout variant="warning" title="Careful">
  This action can&apos;t be undone.
</Callout>
<Callout variant="danger" title="Stop">
  Credentials are missing. Nothing will run.
</Callout>

Without the icon

hideIcon drops the leading glyph for a plainer panel, handy when the callout is short or the icon would repeat something already obvious.

A quieter callout: no leading icon, no title, just the tinted panel.

<Callout variant="info" hideIcon>
  A quieter callout: no leading icon, no title, just the tinted panel.
</Callout>

Props

Prop	Type	Notes
`variant`	`"info"` \| `"success"` \| `"warning"` \| `"danger"`	Intent sets the icon and accent color. Defaults to `"info"`.
`title`	`ReactNode`	Optional bold heading above the body.
`hideIcon`	`bool`	Drop the leading icon.
`children`	`ReactNode`	The body content.
`className`	`string`	Classes merged onto the panel.

Installation

Callout ships in @n6k.io/ui/components. Nothing to install. Register the namespace once in src/app/mdx-components.tsx and the tag resolves in both .mdx and page.py pages:

import * as n6k from "@n6k.io/ui/components";

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    ...n6k, // Callout, and every other n6k component
    ...components,
  } as unknown as MDXComponents;
}