Media control

Media control — a control that sits ON media: the site’s sound pill over its muted hero videos (global-2026.css .video-sound; home, MAFO, MobuppsX, i/RTB), the design lead’s design.

Beta · Actions · packages/css/src/components/media-control.css

.pui-media-host · .pui-media-control (--icon-only --compact) · __icon __label. Dark glass on media, hidden until the host is hovered or the control focused (.is-active shows it).

Media control — every size and every stateOpen in the workshop

Sizes across, states down.

What it is for

• State default (the glyph and the label — volume-off, ‘Turn on sound’) / icon-only (once sound is on: volume-2, the label gone, the pill round)
• Size default 40, the glyph at 24 / compact 32 under 480 of media width, the glyph at 16, the label at font/size/12
• The Icon is exposed; the Label is a text property

Use when a control has to sit on a picture or a video — sound on a muted hero, a pause, a fullscreen.

Do not use when the control sits on the page beside the media (Button, Icon button); it is a caption or a badge on the picture (Badge).

Relates to Icon button, Button, Carousel, Aspect ratio, Icon.

Anti-patterns the light glass on media (it disappears on a picture) · border/focus on media · the pill always visible over a video · a control with no label until its state is known · a glyph drawn by hand.

Keywords: media control, sound toggle, mute, unmute, video button, on-media, glass button, overlay control

Figma — page Media control: Media control (4 variants)

The markup — copy this

The class, the parts, and nothing that is not in the package. The same block opens media-control.css.

<div class="pui-media-host"><video …></video>
  <button class="pui-media-control" type="button" aria-pressed="false">
    <span class="pui-icon pui-media-control__icon"><svg><use href="icons.svg#volume-off"/></svg></span>
    <span class="pui-media-control__label">Turn on sound</span></button></div>

The modifiers

	What it is	Note
State	(none) muted, label + glyph · --icon-only · the host’s :hover / .is-active and the control’s :focus-visible show it	—
Size	(none) 40 · --compact 32	—

Accessibility — measured, not assumed

Every number here is measured on the rendered component: contrast (npm run contrast:render), the focus ring (npm run focus) and the keyboard (npm run keyboard). The floors are principle 12’s.

Contrast

No story of this component renders a text pair axe can measure — a component made of surfaces and borders rather than words. The token pairs it uses are in artifacts/contrast-matrix.md.

The focus ring

primitive	on	the indicator	over	the change
Media control	surface/inverse	outline #ffffff 2 px	#231b1b	16.88	ok
Media control - icon-only	surface/inverse	outline #ffffff 2 px	#231b1b	16.88	ok
Media control - compact	surface/inverse	outline #ffffff 2 px	#231b1b	16.88	ok

0 of 3 focus stop(s) in this block meet WCAG 2.4.13 on screen — the same crop screenshotted focused and unfocused, and the difference measured.

Keyboard

Nothing in this component claims an ARIA role with a keyboard contract; its controls are ordinary ones and the browser already gives them their keys.

Tab order across the whole library is document order over 344 stops, and Shift+Tab is its exact reverse — no keyboard trap anywhere (WCAG 2.1.2).