Example#
Usage#
The volume dial is how visitors choose how loud the site prints, from Quiet to Rave (D-B3, D-B12). It lives in the navbar (compact) and the footer (inline). A visitor's choice wins over every authored volume except specimen frames like the ones on this page.
- Compact is a 44 px key with a gauge glyph and the stop's word; it opens the inline dial in a popover.
- Inline is a radio group of four stop keys, each name printed in its own voice: Quiet condensed, Studio standard, Press wide, Rave wide italic.
- Reset. When a preference exists, "Use the page's own volume" clears it.
- Never motion. The dial changes the ink; reduced motion is the visitor's system setting and the dial never overrides it.
Anatomy#
- LegendSite volume.
.mk-volume-dial-legend - StopA key per volume, its name in its own voice.
.mk-volume-dial-stop - DescriptionOne line on what the stop prints.
.mk-volume-dial-description
Volume#
The dial is reading layer: identical at every volume, so it can always be found and turned back.
Quiet
Studio
Press
Rave
Content#
- Stop names are Quiet, Studio, Press and Rave, in that order, everywhere.
- Descriptions say what changes, in a few words: "Paper and type, art holds still".
Do and don't#
Do
Don't
A volume dial that turns the page up but hides itself at Rave.
Accessibility#
- Native radios named by the stop and described by its line; the compact key is named "Site volume: Studio" and opens a native popover.
- Choosing a stop never changes reduced-motion behaviour; "Use the page's own volume" clears the choice.
| Keys | What happens |
|---|---|
| EnterorSpace on the compact key | Opens the dial in a popover; Escape or a press outside closes it |
| Tab | Moves into the stops, onto the current one |
| Arrow keys | Pick another stop; the site changes at once |
The colour pairs it prints, with their contrast on both papers:
| Text | Surface | Role | Bone | Night |
|---|---|---|---|---|
--mk-on-control | --mk-control | ui | not in this look | not in this look |
--mk-on-selected | --mk-selected | ui | not in this look | not in this look |
--mk-text | --mk-surface-raised | ui | not in this look | not in this look |
--mk-text | --mk-surface | ui | not in this look | not in this look |
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
appearance | "compact" | "inline" | none | |
size | "md" | "sm" | none | Stop names at 28 px (`md`) or 22 px (`sm`, the footer). |
copy | Partial<VolumeDialCopy> | none | |
className | string | none |
Tokens#
System tokens (34)
--mk-border--mk-border-thick--mk-control--mk-control-rule--mk-focus--mk-font-display--mk-font-display-italic--mk-font-text--mk-hover--mk-on-control--mk-on-selected--mk-radius-control--mk-radius-plate--mk-rule--mk-selected--mk-shadow-menu--mk-space-1--mk-space-2--mk-space-3--mk-space-4--mk-surface-raised--mk-target-min--mk-target-touch--mk-text--mk-track-head-card--mk-type-field-label-leading--mk-type-field-label-size--mk-type-field-label-weight--mk-type-head-card-leading--mk-type-label-leading--mk-type-label-size--mk-type-meta-leading--mk-type-meta-size--mk-type-meta-weight
Its own properties (6)
--mk-volume-dial-edge--mk-volume-dial-family--mk-volume-dial-name--mk-volume-dial-pad--mk-volume-dial-wdth--mk-volume-dial-wght
Changelog#
Arrived in 0.1.0.
- The 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.
- SegmentedControl, Tabs and CodeBlock draw LC-05's ring outside the focused key (2 px at 2 px) instead of inset; RadioGroup and CheckboxGroup keys and cards, VolumeDial stops and link Cards mark the element that draws the ring (
data-mk-focus-ring); a focusable VisuallyHidden draws the ring. Read the whole entry