Skip to content
Site volume
Colourway

Components

VisitorControls

The display settings: paper, the volume dial, sound and motion, for the footer and the nav sheet.

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

The display settings: paper, the volume dial, sound and motion, for the footer and the nav sheet. A site that keeps sound elsewhere passes sound={false}; extra dials (the docs' colourway dial) go in as children, after the volume dial. These docs print their own footer this way.

Example#

Look of this example
Site volume
Live render of examples/visitor-controls/basic.tsx

Usage#

Visitor controls are the display settings in one place: the paper, the volume dial, sound and motion. The footer and the phone menu print them, so every setting is reachable from every page.

  • Contents. ThemeToggle (segmented), VolumeDial (inline), SoundToggle (labelled) and MotionToggle.
  • No sound? sound={false} leaves the sound key out on sites that make none (these docs).
  • Extra dials go in children, such as these docs' colourway dial.

Anatomy#

Site volume
The parts of examples/visitor-controls/basic.tsx, numbered:
  1. PaperBone or Night..mk-theme-toggle, .mk-segmented-control
  2. Volume dialQuiet to Rave..mk-volume-dial
  3. SoundOff until turned on..mk-sound-toggle
  4. MotionHolds loops still..mk-motion-toggle

Volume#

Reading layer: identical at every volume.

  • Quiet

    Site volume

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

  • Studio

    Site volume

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

  • Press

    Site volume

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

  • Rave

    Site volume

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

Content#

  • The group is named "Display settings"; every control inside keeps its own literal name.

Do and don't#

Do

Site volume

One place, every page.

Don't

Display settings scattered: the paper in the navbar, the volume on the home page only, sound on a settings page.

Settings people have to hunt for.

People look for settings in one place. The footer and the phone menu carry them all, on every page.

Accessibility#

  • A named section ("Display settings"); each control brings its own keyboard behaviour.
  • Every choice persists through PrefsScript before the first paint.

Props#

PropTypeDefaultDescription
labelstring"Display settings"The section's name (default "Display settings").
soundbooleantrueThe labelled sound key (default true).
childrenReactNodenoneExtra dials, after the volume dial (e.g. a colourway dial).
classNamestringnone

Generated from VisitorControlsProps in packages/overprint-react/src/reading/visitor-controls/visitor-controls.tsx.

Tokens#

System tokens (3)

Scanned from its CSS at build and checked against its registry entry.

Changelog#

Arrived in 0.1.0.

0.9.024 October 2026

  • MinorreactVisitorControls takes sound={false} and extra dials as children (DF-40). Read the whole entry
  • Patchreactvisitor-controls: the inline volume dial takes a line of its own width in VisitorControls, so its four stops sit in a row on a desktop footer instead of shrinking into one narrow column beside the theme key (DF-51). In a narrow sheet it still wraps to its own line.

0.1.024 October 2026

  • MinorreactSection with its plate and Art slot, Plate, VolumeScope, PageHero, SectionHead, Eyebrow, Card, LineCard, InfoPanel, Stack, Cluster, Grid, Container, Main, Rule and the FittedLine client fitter; Navbar with the NavDisclosure mega panels, Footer, FooterMap, BuildStamp, SkipLink, ActionDock and VisitorControls; the Table parts, ComparisonTable with the one-tier switcher, SpecStrip, Numeral, Stat, StatGroup, StatusChip, Badge and ScoreDial; Prose with mdxComponents, Quote, CodeBlock with CopyButton, Figure, ScreenshotFrame and PhoneFrame; and the brand: the three evolved 2 × 2 options in markGeometry (a Overprint by default, b Paper seam, c Key block) with the pixel-snapped px mode and the one-ink seam variant, logoGeometry with the 1x clear-space frame, Mark, Wordmark, Logo, MaxosMark and LineBadge. Read the whole entry