Skip to content
Site volume
Colourway

Components

ActionDock

The phone quote dock: one action key that shows once the hero's key has scrolled away.

Import from@maxgrits/overprint-react/action-dock
On this page

Example#

Look of this example
Live render of examples/action-dock/basic.tsx

Usage#

Use the action dock on pages where the main action should stay in reach on a phone: a fixed bar at the bottom holding one full-width action key. It appears once the hero's key scrolls away and hides while another action key is mostly in view.

  • Phones only. It shows below the md width; desktops already have the key in the navbar.
  • The anchor. Mark the hero's key with data-mk-dock-anchor; the dock waits until it leaves the screen.
  • Out of the way. It hides while a dialog or drawer is open and while the on-screen keyboard is up, and sets --mk-dock-h so content and focus are never covered (WCAG 2.4.11).
  • Pages that should not have it simply do not render it.

Anatomy#

  1. Dock: a fixed bar at the bottom of the screen on the surface ink, with a soft top rule and the safe-area inset, below the md width only.
  2. Action key: one block key with the page's main verb, the same words as the hero's key.

The dock only prints on phone-width screens, so it is drawn here as a list; open this page on a phone and scroll past the example's key to see it.

Volume#

Reading layer: identical at every volume.

Content#

  • One key, the same words as the hero's action: "Get a quote".

Do and don't#

Do

One dock with "Get a quote", the same words as the hero's key.

One action, always in reach.

Don't

A dock with three keys: call, email and quote.

Three small keys squeezed into a bar.

The dock exists to make one action effortless. Splitting it makes every key smaller and the choice slower.

Accessibility#

  • Hidden, it is inert; shown, it sets --mk-dock-h so focused elements are never covered (2.4.11).
  • It hides while another action key is half visible, while a dialog or drawer is open and while the keyboard is up.
  • Routes that must not show it simply do not render it.

Props#

PropTypeDefaultDescription
children requiredReactNodenoneOne `block` action key.
labelstring"Quick action"The dock's region name (default "Quick action").
classNamestringnone

Generated from ActionDockProps in packages/overprint-react/src/reading/action-dock/action-dock.tsx.

Tokens#

System tokens (9)

Its own properties (1)

  • --mk-dock-h

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

Changelog#

Arrived in 0.1.0.

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