Component

Callout

Mark notes, tips, and warnings with clear labels and token-backed accents.

Usage

Import the component entry and start with its smallest complete example.

Import

import { Callout } from "@chitrank2050/monoline-ui/callout"

Basic usage

<Callout variant="note" label="Optional Label">
  This is a basic informational callout.
</Callout>
<Callout variant="tip">
  This is a helpful tip callout.
</Callout>
<Callout variant="warn">
  This is a warning callout.
</Callout>

Usage guidance

Choose the component for its interaction model and semantics before customizing its appearance.

Use when

Callout separates a note, tip, or warning from the surrounding documentation.

Avoid when

The message is transient, reports a validation error, or belongs in the normal reading flow.

Accessibility

Callout uses an aside and a visible label, but it is not a live region. Handle urgent messages with an explicit alert strategy.

Server Component

This component can render without adding a Monoline client boundary when its children and props are serializable.

API reference

Props, slots, and callbacks available on this component.

variantnote | tip | warnVisual styling variant

labelstringOptional label displayed on top of the content

Design tokens

Theme variables this component reads for color, spacing, and motion.

--callout-tip-accentCSS varTip variant accent color

--callout-warn-accentCSS varWarning variant accent color

Implementation

The source used by the example above, including any state it needs.

import { Callout } from "@chitrank2050/monoline-ui/callout"

export function CalloutDemo() {
  return (
    <Callout variant="tip" label="Pro Tip">
      Use code-splitting in tsup to optimize bundles.
    </Callout>
  )
}

Compare related components or review the package and theme setup.

01ComponentCode BlockComponent · ReferenceReference→02ComponentSection HeadComponent · ReferenceReference→03SetupInstall Monoline UISetup · GuideGuide→04ThemeTailwind CSS v4 design tokensTheme · FoundationsFoundations→

Interactive preview