Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Player Controls Button Group for React

Previous, play or pause, and next, as icons and as labels, sharing a playing flag that starts paused.

Transport controls, starting paused. The middle button swaps between play and pause, and both rows read that same flag. The icon row names each button. The labeled row says Previous, Play, and Next. Previous and Next do nothing.

Use this under audio or video, and connect the flag to the media yourself. A fine volume level is a Slider. In React, Base UI does not play or pause the media.

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

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div className="flex flex-col gap-4">
  <ButtonGroup aria-label="Player controls">
    <Button aria-label="Previous" size="icon-sm" variant="outline">
      <SkipBackIcon aria-hidden="true" />
    </Button>
    <Button
      aria-label={isPlaying ? "Pause" : "Play"}
      onClick={togglePlaying}
      size="icon-sm"
      variant="outline"
    >
      {isPlaying ? (
        <PauseIcon aria-hidden="true" />
      ) : (
        <PlayIcon aria-hidden="true" />
      )}
    </Button>
    <Button aria-label="Next" size="icon-sm" variant="outline">
      <SkipForwardIcon aria-hidden="true" />
    </Button>
  </ButtonGroup>
  <ButtonGroup aria-label="Player controls">
    <Button size="sm" variant="outline">
      <SkipBackIcon aria-hidden="true" data-icon="inline-start" />
      Previous
    </Button>
    <Button onClick={togglePlaying} size="sm" variant="outline">
      {isPlaying ? (
        <PauseIcon aria-hidden="true" data-icon="inline-start" />
      ) : (
        <PlayIcon aria-hidden="true" data-icon="inline-start" />
{/* The rest of the file is under Installation. */}

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.

API Reference

Button Group

Sets aria-label="Player controls". The rest is on the Button Group page.

Button

Sets aria-label="Previous", size="icon-sm", variant="outline", aria-label={isPlaying ? "Pause" : "Play"}, onClick={togglePlaying} and aria-label="Next". The rest is on the Button page.

All 39 button group examples