Transport
Paused · Studio session
Playback controls
Groups named play, pause, previous, next, and stop controls with 44px targets.
Preview
In action
When to use
Use it for
- Transport controls beside media metadata or inside a player.
- Custom previous and next labels when actions restart or seek.
Not for
- A media source by itself; use MediaPlayer to bind to audio or video.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { PlaybackControls } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/playback-controls.
2. Vendor the source
npx @noorddev/vlak-cli add playback-controls
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/playback-controls.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { PlaybackControls } from "@noorddev/vlak-react";
<PlaybackControls playing={playing} onPlayingChange={setPlaying} onPrevious={restartTrack} previousLabel="Restart track" onNext={skipAhead} nextLabel="Skip ahead" />Props
PlaybackControls
Named, keyboard-operable transport buttons. Playback state may be owned by a media element.
| Prop | Type | Default | Description |
|---|---|---|---|
playing | boolean | ||
defaultPlaying | boolean | false | |
onPlayingChange | (playing: boolean) => void | ||
onPrevious | () => void | ||
onNext | () => void | ||
onStop | () => void | ||
disabled | boolean | false | |
previousDisabled | boolean | false | |
nextDisabled | boolean | false | |
previousLabel | string | "Previous track" | |
nextLabel | string | "Next track" | |
label | string | "Playback controls" |
Also accepts HTMLAttributes<HTMLDivElement>.
Keyboard
| Keys | Does |
|---|---|
| Tab, Shift+Tab | Moves between enabled transport buttons. |
| Enter, Space | Activates the focused transport action. |
Accessibility
- Every icon button has a state-aware accessible name.
- Optional previous, next, and stop actions render only when supplied.
- The containing group has a customisable label; disabled actions use native disabled buttons.
Markup
<div class="rs-playback-controls" role="group" aria-label="Playback controls"><button class="rs-btn-primary rs-playback-action" type="button" aria-label="Play">Play</button></div>
Classes
.rs-playback-controls.rs-playback-action