Skip to content
Site volume
Colourway

Components

Callout

Notes, tips, warnings, errors and successes on the white plate, told apart by glyph, title and rule weight.

  • Beta
  • Reading layer
  • Server component
  • Since 0.1.0
  • Press check
Import from@maxgrits/overprint-react/callout
On this page

Example#

Look of this example

The old links stop working on 1 March.

Redirects are set up.
Live render of examples/callout/basic.tsx

Usage#

Use a callout for a short note that should not be missed: a tip, a warning, an error summary, an audit verdict. Every tone shares the white plate and the ink rule; they differ by glyph and title, and warnings and errors add a heavier rule and a hatch strip, so salience never depends on colour (N10).

  • Tones. note, tip, warning, error and success.
  • The title is required and visible: it carries the point.
  • live gives a callout inserted after load the alert or status role; static callouts need none.
  • Not for decoration. If everything is a callout, nothing is.

Anatomy#

The old links stop working on 1 March.

Redirects are set up.
The parts of examples/callout/basic.tsx, numbered:
  1. HatchWarnings and errors: a 6 px strip of ink stripes..mk-callout-hatch
  2. GlyphOne shape per tone..mk-callout-glyph
  3. TitleThe point, in a sentence..mk-callout-title
  4. BodyOne or two sentences..mk-callout-body

Volume#

Reading layer: identical at every volume.

  • Quiet

    The old links stop working on 1 March.

    Redirects are set up.

    Docs, forms, legal and long reads. Flat inks, no art in motion.

  • Studio

    The old links stop working on 1 March.

    Redirects are set up.

    The site default. Art on its own plates, one display moment per view.

  • Press

    The old links stop working on 1 March.

    Redirects are set up.

    Hero moments, covers and campaigns. Halftone fields and the second ink.

  • Rave

    The old links stop working on 1 March.

    Redirects are set up.

    Launches, posters and the 404. Every ink, and the words still win.

Content#

  • The title states the fact: "The old links stop working on 1 March."
  • The body says what to do or what has been done: "Redirects are set up."
  • Errors say how to fix it, never just that something failed.

Do and don't#

Do

The old links stop working on 1 March.

Redirects are set up.

The title is the news.

Don't

Warning

Please note that there may be some changes to links in the future.

A title that repeats the tone.

Readers scan titles. A title that only says Warning tells them nothing the hatch does not already say; the date and the change do.

Accessibility#

  • Tones differ by glyph and title, warnings and errors by a heavier rule and a hatch strip: never by colour alone.
  • live makes an inserted callout an alert (error, warning) or a status (the rest).
KeysWhat happens
(none)Not interactive

The colour pairs it prints, with their contrast on both papers:

TextSurfaceRoleBoneNight
--mk-ink--mk-paperbody 16.49:1 · Lc 97.4, passes 16.21:1 · Lc 96.1, passes
--mk-ink--mk-paperbody-ui 16.49:1 · Lc 97.4, passes 16.21:1 · Lc 96.1, passes
--mk-ink--mk-paperlong 16.49:1 · Lc 97.4, passes 16.21:1 · Lc 96.1, passes
--mk-ink--mk-paper-sunkenbody 15.20:1 · Lc 92.2, passes 15.53:1 · Lc 95.7, passes
--mk-ink--mk-paper-sunkenbody-ui 15.20:1 · Lc 92.2, passes 15.53:1 · Lc 95.7, passes
--mk-ink--mk-paper-sunkenlong 15.20:1 · Lc 92.2, passes 15.53:1 · Lc 95.7, passes
--mk-ink--mk-paper-platebody 18.42:1 · Lc 105.1, passes 15.02:1 · Lc 95.4, passes
--mk-ink--mk-paper-platebody-ui 18.42:1 · Lc 105.1, passes 15.02:1 · Lc 95.4, passes
--mk-ink--mk-paper-platelong 18.42:1 · Lc 105.1, passes 15.02:1 · Lc 95.4, passes
--mk-ink--mk-ink-m-tintlong 15.20:1 · Lc 92.2, passes 13.80:1 · Lc 94.3, passes
--mk-ink--mk-ink-a-tintlong 15.61:1 · Lc 93.9, passes 13.48:1 · Lc 93.9, passes
--mk-ink--mk-ink-r-tintlong 15.34:1 · Lc 92.7, passes 13.73:1 · Lc 94.2, passes
--mk-ink--mk-ink-k-tintlong 15.38:1 · Lc 92.9, passes 13.59:1 · Lc 94.2, passes
--mk-ink--mk-ink-y-tintlong 15.54:1 · Lc 93.6, passes 13.60:1 · Lc 94.1, passes
--mk-ink--mk-ink-wood-tintlong 15.42:1 · Lc 93.1, passes 13.70:1 · Lc 94.2, passes
--mk-ink--mk-ink-go-tintlong 15.65:1 · Lc 94.0, passes 13.38:1 · Lc 93.9, passes

Process at Studio, normal contrast. Every look: the press check.

Props#

PropTypeDefaultDescription
toneCalloutTonenone
title requiredReactNodenoneRequired and visible.
livebooleannone`role="alert"` for error and warning, `role="status"` otherwise; only when inserted dynamically.
titleAs"h2" | "h3" | "h4" | "p"pThe title's element (default `p`; a heading where the callout starts a section).
childrenReactNodenone

Plus 278 React and DOM attributes passed through to the root element (className, ref, aria-*, event handlers and the rest). Generated from CalloutProps in packages/overprint-react/src/reading/callout/callout.tsx.

Tokens#

System tokens (19)

Its own properties (3)

  • --mk-callout-hatch
  • --mk-callout-pad
  • --mk-callout-rule

Scanned from its CSS at build and checked against its registry entry; 14 read but not declared there.

Changelog#

Arrived in 0.1.0.

0.1.024 October 2026

  • MinorreactThe reading layer's controls, overlays, forms and visitor prefs (P2-T1 to P2-T5): every Button is the comic hit key, with IconButton, Link and Tooltip; Input, Textarea, Select, Checkbox and CheckboxGroup, Radio and RadioGroup, Switch, Slider with the ruler, RulerReadout and SegmentedControl; Dialog, Drawer, NavSheet, Tabs, Disclosure, Faq and faqJsonLd on Base UI 1.9 where the platform falls short; Field, Fieldset, Form with the site's inline validation, ErrorSummary, Callout, Honeypot, FormTimestamp and QuoteForm; PrefsScript under 1 KB, usePref and setPref with cross-tab sync, ThemeToggle and the visitor VolumeDial; VisuallyHidden.