Callout

An emphasised aside. The five named tones mirror GitHub’s alert types, so a document can use <CalloutBox variant="caution"> in MDX and > [!CAUTION] in plain markdown and get the same box either way.

Source

Import

import { Callout } from "@flanksource/clicky-ui/data";

Demos

Tones · Open in Storybook

Annotation · Open in Storybook

Emphasis · Open in Storybook

The props table documents the component-specific surface. Standard DOM attributes inherited from React, such as className, event handlers, and accessibility attributes, may also be accepted when the component’s prop type extends a native element.

Props

Prop	Type	Default	Description
badge	string	—	Leading identifier chip, e.g. an annotation number or a control ref.
children	ReactNode	—	Content to display inside the callout.
className	string	—	Optional CSS class name.
emphasis	string | boolean	false	Heavier full-border treatment, for callouts that block rather than inform. Accepts the string forms `rehype-raw` produces when a callout is authored as raw JSX in markdown (`""`, `"true"`, `"false"`).
icon	enum	—	Glyph to draw, named independently of `variant`. Defaults to the variant's own icon. Set it when the colour and the symbol need to say different things — an amber "TODO" that reads as a question, say — or to give an untinted `default` callout an icon it would otherwise not draw.
label	string	—	Inline label in the header row. Defaults to the variant's own name.
source	string	—	Muted trailing attribution, e.g. a reviewer or source name.
title	string	—	Optional block title above the body.
variant	enum	default	Visual variant. The five named tones are the same set `> [!NOTE]` markdown produces, and render identically to it.