Docs draft
PlayerMenu
Component storyFigma (PlayerMenu) ↗React component ↗DSDS entity ↗
When to use it
useThe in-player settings panel: main menu of value rows, drilling into radio submenus (audio, subtitles, quality, speed).
avoidGeneral dropdowns anywhere outside the player.
menu-menu-item Menu + MenuItem.Anatomy
panel — 320px on bg.elevated + shadow.overlay, mirroring Menu.
header — Back chevron + title; hidden on the main menu (Show Header boolean).
rows slot — Composes MenuItem: Toggle (autoplay), Drilldown with Info value, Radio, and the new Radio Premium row wearing the accent crown.
Design specifications
| width | 320px |
| surface | color.bg.elevated + shadow.overlay |
| premium-mark | 16px crown in color.accent.text |
Accessibility
role=menu; the header is a real back button; premium-locked options keep their crown visible to screen readers via the row label.