Media playback requires intuitive controls—button groups unify player actions. This React component combines shadcn/ui's Button and ButtonGroup components with Lucide React's PlayIcon, PauseIcon, SkipBackIcon, and SkipForwardIcon for media player controls with stateful play/pause toggling. Built on Radix UI with icon-only compact variants and icon-with-text descriptive variants using size="sm" for toolbar density, the pattern delivers media controls with immediate recognition. Perfect for audio players like Spotify or Apple Music controlling track playback, video platforms like YouTube or Vimeo offering playback controls, podcast apps managing episode progression, or any media interface where playback controls should be grouped—button groups unify media actions, play/pause toggle communicates state, skip buttons enable quick navigation. The unified button group visually connects related media controls reducing cognitive load when users scan for playback functionality, while the play/pause state toggle provides immediate visual feedback about current playback status without requiring separate indicators. In media-rich applications, grouping these controls creates a recognizable control panel pattern users expect from decades of media player conventions across physical devices and digital interfaces.

Installation

npx shadcn@latest add https://www.shadcn.io/registry/button-group-media-1.json

npx shadcn@latest add https://www.shadcn.io/registry/button-group-media-1.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-media-1.json

bunx shadcn@latest add https://www.shadcn.io/registry/button-group-media-1.json

Related patterns you will also like

Questions you might have