Skip to content

Media Button

Media buttons are circular play / pause controls for video and audio players. They sit on top of imagery or video frames as the primary play affordance, optionally wrapped in a progress ring that traces playback time.

Ready to use

Design Develop Accessibility

Media buttons are circular play / pause controls for video and audio players. The icon glyph fills the button, and an optional progress ring traces playback time around the edge. For any other icon-only control — close, share, mute — reach for Icon Button instead.

Anatomy

Section titled “Anatomy”
  1. Container
  2. Icon
  3. Progress ring

When to use it

Section titled “When to use it”

Use the Media Button when:

  • It’s the primary play / pause affordance on a media surface (hero video, gallery, audio player).
  • The same control needs a progress ring tracking video or audio playback time.

Avoid the Media Button when:

  • The action isn’t play / pause — even close-on-a-poster or mute-on-an-asset belongs to Icon Button.
  • The control sits in regular page chrome — Icon Button is the right primitive there.
  • The icon needs a visible label — pair Icon Button with a tooltip, or use a standard Button.

Properties

Section titled “Properties”

Size

Two sizes: Large (64×64) for hero media and Small (40×40) for inline controls. The icon glyph scales with the container; padding stays at zero so the icon reads as the surface.

Contrast

Two modes: Neutral for use on dark imagery, and Contrast for light or busy backgrounds. The contrast set keeps the icon at the 3:1 non-text contrast required by WCAG.

Lexus border treatment

Lexus replaces the solid 1px border with a copper gradient — copper-400 to copper-500 at rest, and a three-stop sweep on hover and active. The deviation is implemented via html[data-brand='lexus']; Figma shows a flat copper placeholder because multi-brand variables can’t carry gradients.

Platform considerations

Section titled “Platform considerations”

Desktop

The large size suits hero videos and gallery players where the control needs to read from a distance. Keep the button centred over the media so it stays predictable.

Tablet

Same sizing as desktop. The 64 px large size still feels right on tablets; only step down to small inside compact playlists or thumbnail rows.

Mobile

Stick with the large size for primary playback. Small is reserved for inline rows where space is tight, and even then the 40 px diameter clears the touch target minimum.

Best practices

Section titled “Best practices”

Reserve the Media Button for play / pause — its visual language only makes sense in that context.

Do

Always include an accessible name (aria-label="Play", aria-label="Pause") and update it when the state toggles, pick the contrast mode that matches the brightness of the media beneath, and let the icon’s 3:1 contrast ratio carry the visual cue.

Don't

Don’t repurpose the Media Button for non-playback icons, don’t leave the aria-label stale after the state flips, and don’t drop below the small size — the icon needs the container to read at a glance.

Content guidelines

Section titled “Content guidelines”

The button is icon-only, so the accessible name has to do all the work. Use a single-verb label — “Play”, “Pause” — and switch it when the state toggles. Keep wording identical across the product so screen-reader users recognise the control no matter where it sits.