# Callout

> A flagged prose block for tips, notes, warnings, and cautions - the Markdown admonition we reach for inside long-form docs.

- Category: data-display
- Status: stable (since 1.0.0)
- Tokens: --background-secondary, --foreground-primary, --foreground-muted, --foreground-info, --foreground-warning, --foreground-danger
- Playground: https://design.freecodecamp.org/playground#callout
- npm dependencies: `react@>=18 <20`
- Registry dependencies: [theme](https://design.freecodecamp.org/registry/theme.md)
- Files:
  - `Callout.tsx` → `src/ui/callout/Callout.tsx` (raw: https://design.freecodecamp.org/registry/callout/Callout.tsx)
  - `callout.css` → `src/ui/callout/callout.css` (raw: https://design.freecodecamp.org/registry/callout/callout.css)

## Install (copy source)

1. Ensure the theme is installed once per project - tokens.css + base.css imported globally, fonts available. See https://design.freecodecamp.org/registry/theme.md and https://design.freecodecamp.org/registry/starter.md.
2. Copy the files below into `src/ui/callout/` (adjust to your project layout) and import the CSS once from your global stylesheet, e.g. `@import './ui/callout/callout.css';`.
3. Colors, spacing and type come from tokens - tailor the component by editing the copied source; recolour by editing tokens.css, not the component CSS.

## Usage

Callouts are the static admonition block used inside prose. They nudge the
reader without interrupting the reading order - unlike `<Alert>`, they do not
live-announce.

## Usage

```tsx
import { Callout } from './ui/callout/Callout';
<Callout variant='tip'>
  Prefer `<Tooltip>` for short hints; reserve callouts for paragraphs that
  earn their visual weight.
</Callout>;
```

## Accessibility

Renders as `<aside>`. Treat the label as a proper sub-heading when you nest
callouts inside article flow. Callouts are not live regions - if the state
must be announced, use `<Alert>` instead.

## Example

```tsx
import { Callout } from './ui/callout/Callout';

<Callout variant="tip" label="Tip">
  Open the editor fullscreen with <kbd>F11</kbd>.
</Callout>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `variant` | `enum` | no | `tip` |  |
| `label` | `ReactNode` | no | - |  |

## Source: Callout.tsx

```tsx
import React, { forwardRef } from 'react';

export type CalloutVariant = 'tip' | 'note' | 'warning' | 'caution';

export interface CalloutProps extends React.HTMLAttributes<HTMLElement> {
  variant?: CalloutVariant;
  label?: React.ReactNode;
}

const DEFAULT_LABEL: Record<CalloutVariant, string> = {
  tip: 'Tip',
  note: 'Note',
  warning: 'Warning',
  caution: 'Caution'
};

export const Callout = forwardRef<HTMLElement, CalloutProps>(
  ({ variant = 'tip', label, className = '', children, ...rest }, ref) => {
    const classes = ['callout', `callout--${variant}`, className]
      .filter(Boolean)
      .join(' ');
    const resolvedLabel = label ?? DEFAULT_LABEL[variant];
    return (
      <aside ref={ref as React.Ref<HTMLElement>} className={classes} {...rest}>
        <p className='callout__label'>{resolvedLabel}</p>
        <div className='callout__body'>{children}</div>
      </aside>
    );
  }
);
Callout.displayName = 'Callout';
```

## Source: callout.css

```css
.callout {
  padding: 14px 16px;
  border-left: var(--border-width-thick) solid var(--foreground-quaternary);
  background: var(--background-secondary);
  margin: 0 0 16px;
}
.callout__label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 6px;
}
.callout__body {
  margin: 0;
}
.callout--tip {
  border-left-color: var(--success-color);
}
.callout--tip .callout__label {
  color: var(--success-color);
}
.callout--note {
  border-left-color: var(--highlight-color);
}
.callout--note .callout__label {
  color: var(--highlight-color);
}
.callout--warning {
  border-left-color: var(--warning-color);
}
.callout--warning .callout__label {
  color: var(--warning-color);
}
.callout--caution {
  border-left-color: var(--danger-color);
}
.callout--caution .callout__label {
  color: var(--danger-color);
}
```

## HTML / vanilla variant

```html
<aside class="callout callout--tip">
  <p class="callout__label">Tip</p>
  <p class="callout__body">Open the editor fullscreen with <kbd>F11</kbd>.</p>
</aside>
```

Interactive behaviours for plain HTML come from the vanilla runtime (data-uikit-* attributes): https://design.freecodecamp.org/registry/vanilla.md - or download https://design.freecodecamp.org/cdn/uikit.global.js once and self-host it (do not hotlink).

## For coding agents

This library is distributed as copyable source, not an npm package. Start at https://design.freecodecamp.org/registry/starter.md, discover components via https://design.freecodecamp.org/llms.txt, and copy files into the consuming project. Keep token names intact; recolour by editing the copied tokens.css.