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

DesignDevelopAccessibility

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. Media button
  2. Progress bar
  3. Play icon

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 gradient treatment

For Lexus the resting button keeps its flat grey border. The copper gradient shows in two coincident places: the circular progress arc, and the button ring on hover/active — the state where the border already turns copper. Both share one outer edge, so a part-swept arc reads as a single ring, and hover only recolours the ring rather than thickening it. They reuse the shared border-gradient tokens (--tng-color-border-gradient-*) the rectangular gradient borders draw from. Implemented via html[data-brand='lexus']; Figma shows a flat copper placeholder because multi-brand variables can’t carry gradients. Because the ring is circular, inset, and drawn with outline (not border), the gradient is a linear-gradient masked into an annulus rather than the background-clip: border-area treatment the rectangular buttons use.

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.