HDS Play Buttons & Media Controls

[abbybowman]

Feature name

Components: Play button, Fullscreen/Expand button, NASA TV Live badge

Feature area

Design tokens (colors, typography, spacing)

Describe the idea

Why grouped: All are media-context buttons that appear on/near video and image content.
See in context in the Video Player component: https://website.nasa.gov/hds/components/video-player/

Use case / user story

As a dev building a site with embedded videos, I want to style the video player with HDS-specific controls.

Primary audience

All of the above

Is this already in the HDS Figma library?

✅ Yes — fully specced in HDS Figma

Figma reference

No response

Implementation maturity

✅ Production — already running on a live NASA site or project

Prior art details

In prod on NASA+ (plus.nasa.gov). The main site www.nasa.gov has a NASA Live button in the top right of the global header that changes state based on whether a livestream is currently live or not.

Relationship to USWDS

Independent of USWDS

Potential breaking change?

No — purely additive

Alternatives considered

No response

Additional context

Notes for future build:

• Play buttons: Figma shows 2 color variants (white, blue) × 2 sizes × 3 states (default, focus, hover). White variant darkens to gray on hover. Blue variant darkens to NASA Blue Shade on hover.
• Fullscreen/expand: Circle icon button with expand-arrows glyph. Figma shows dark fill. Likely a new .hds-btn-icon role (--expand?) or reuses --utility
• NASA TV badge: "LIVE" text tag — red + white and black + white versions. Not really a "button" — closer to a status indicator. Consider whether this belongs in a Badges/Tags component instead. Figma shows it paired with "NASA TV" text
• Confirm all needed icon SVGs exist in hds-icons/ before starting
• Test on both light and dark palette contexts

Would you contribute to this?

Partially — I could help with design/research/testing