Design
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.
Two sizes (Small / Large) and two contrast modes (Neutral / Contrast). For any other icon-only control — close, share, mute — reach for Icon Button instead.
When to use it (and when not to)
Section titled “When to use it (and when not to)”Use Media Buttons for:
- The primary play / pause affordance in a media surface (hero video, gallery, audio player).
- The same control with a progress ring tracking video or audio playback time.
Avoid Media Buttons 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 label — pair Icon Button with a tooltip, or use the standard Button.
Quick summary of accessibility & consistency
Section titled “Quick summary of accessibility & consistency”- Always include an accessible name (e.g.
aria-label="Play",aria-label="Pause"). Update it when the state toggles. - The icon must contrast at least 3:1 against the button fill (WCAG 1.4.11 non-text contrast).
- Use the Contrast mode when placed on light or busy media; default Neutral works on dark imagery.
Properties
Section titled “Properties”Large
Media button
Height: 64
Width: 64
Icon
Size: 58
Small
Media button
Height: 40
Width: 40
Icon
Size: 36
Contrast
Section titled “Contrast”Pick the contrast mode that matches the brightness of the media behind the button — see Schemes for how .is-contrast propagates.
Neutral
Media button
Background:
buttons-media-button-neutral-rested-fill-color#f5f5f5buttons-media-button-neutral-rested-fill-color#282830 Foreground:
buttons-media-button-neutral-rested-foreground-color#333333buttons-media-button-neutral-rested-foreground-color#ffffffContrast
Media button
Background:
buttons-media-button-contrast-rested-fill-colorrgba(0, 0, 0, 0.2)buttons-media-button-contrast-rested-fill-color#ffffff Foreground:
buttons-media-button-contrast-rested-foreground-color#ffffffbuttons-media-button-contrast-rested-foreground-color#15151bLexus brand override
Section titled “Lexus brand override”Lexus media buttons replace the solid 1px border with a copper gradient. This deviation is implemented via html[data-brand='lexus']; Figma represents it as a flat copper placeholder because multi-brand variables can’t carry gradients.
Rested / Default
Media button (Lexus)
Border gradient:
linear-gradient(90deg, --tng-color-copper-400 0%, --tng-color-copper-500 100%)
Hover / Active
Media button (Lexus)
Border gradient:
linear-gradient(90deg, --tng-color-copper-500 0%, --tng-color-copper-400 50%, --tng-color-copper-500 100%)
Layout and spacing
Section titled “Layout and spacing”Media button
Direction: Horizontal
Alignment: Middle center
Vertical resizing: Fixed
Horizontal resizing: Fixed
Padding: 0
Border radius: Pill (50%)
Border weight: 1
Styling
Section titled “Styling”Colors
Section titled “Colors”| Name | Applied as | Applied to |
|---|---|---|
buttons-media-button-neutral-rested-fill-color | Background color | Media button |
buttons-media-button-neutral-rested-fill-color | Background color | Media button |
buttons-media-button-neutral-rested-border-color | Border color | Media button |
buttons-media-button-neutral-rested-border-color | Border color | Media button |
buttons-media-button-neutral-rested-foreground-color | Icon color | Media button |
buttons-media-button-neutral-rested-foreground-color | Icon color | Media button |
buttons-media-button-neutral-hover-fill-color | Background color | Media button |
buttons-media-button-neutral-hover-fill-color | Background color | Media button |
buttons-media-button-neutral-hover-border-color | Border color | Media button |
buttons-media-button-neutral-hover-border-color | Border color | Media button |
buttons-media-button-neutral-active-fill-color | Background color | Media button |
buttons-media-button-neutral-active-fill-color | Background color | Media button |
buttons-media-button-neutral-active-border-color | Border color | Media button |
buttons-media-button-neutral-active-border-color | Border color | Media button |
buttons-media-button-neutral-disabled-fill-color | Background color | Media button |
buttons-media-button-neutral-disabled-fill-color | Background color | Media button |
buttons-media-button-neutral-disabled-foreground-color | Icon color | Media button |
buttons-media-button-neutral-disabled-foreground-color | Icon color | Media button |
buttons-media-button-contrast-rested-fill-color | Background color | Media button |
buttons-media-button-contrast-rested-fill-color | Background color | Media button |
buttons-media-button-contrast-rested-border-color | Border color | Media button |
buttons-media-button-contrast-rested-border-color | Border color | Media button |
buttons-media-button-contrast-rested-foreground-color | Icon color | Media button |
buttons-media-button-contrast-rested-foreground-color | Icon color | Media button |
color-border-focus-neutral-default | Focus ring color | Media button |
color-border-focus-neutral-default | Focus ring color | Media button |
color-border-focus-contrast-default | Focus ring color | Media button |
color-border-focus-contrast-default | Focus ring color | Media button |
color-copper-400 | Border gradient (Lexus) | Media button |
color-copper-400 | Border gradient (Lexus) | Media button |
color-copper-500 | Border gradient (Lexus) | Media button |
color-copper-500 | Border gradient (Lexus) | Media button |