Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Media

Player Controls Button Group for React

Media player controls with previous, play or pause, and next buttons, icon-only and with labels.

Framework
UI library

The transport buttons of an audio or video player. The middle button swaps between play and pause from one playing flag, and both rows read that flag. The icon-only row names each button with an aria-label; the labeled row says Previous, Play or Pause, and Next.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does play switch to pause?

A playing flag starts as false. The middle button flips it, and shows PauseIcon with Pause while playing or PlayIcon with Play otherwise.

How are the icon-only controls named?

Each has an aria-label: Previous, Next, and Play or Pause from the flag. They use size="icon-sm", and the icons have aria-hidden="true".

Do both rows control the same player?

Yes. Both middle buttons flip the same flag, so they always agree.

Do Previous and Next do anything?

No. They have no handler. Wire them to your playlist or to seek the media element.

How do I connect this to audio or video?

Call play() or pause() on the media element when the flag changes, and update the flag from its play and pause events so the button follows the real state.

Why is the Next icon after the label?

It points forward, so it follows the text with data-icon="inline-end". Previous puts its icon first.

All 39 button group examples