Transport Button
Interactive buttons for DAW transport controls with built-in icons, keyboard shortcuts, and visual states for play, pause, stop, record, loop, and metronome.
Transport Actions
All available transport button actions with default styling.
Play
Pause
Stop
Record
Rewind
Forward
Loop
Metronome
Sizes
Transport buttons in small, medium (default), and large sizes.
Small (28px)
Medium (36px)
Large (44px)
Button States
Visual states for different transport conditions.
Idle
Active
Armed
Blinking
Disabled
Loading
Play/Pause Toggle
The playPause action automatically switches icon based on isPlaying state.
Stopped - Click to toggle
Interactive Transport
A functional transport control set with state management.
State: Stopped | Seek: +0
Toggle Buttons
Loop and metronome buttons that toggle on/off with active state.
Loop: Off
Metronome: Off
With Labels
Show text labels below the icons for clarity.
Active States with Glow
Active buttons with glow effect (default) vs without glow.
With Glow
Without Glow
Record Active
Loop Active
Long Press for Seeking
Hold rewind/forward buttons for continuous seeking.
Position: 0 (Hold to seek continuously)
Accessibility
Keyboard shortcuts and ARIA support.
Keyboard Shortcuts
- Space - Play / Pause
- Enter - Stop
- R - Record
- , - Rewind
- . - Forward
- L - Toggle Loop
- M - Toggle Metronome
ARIA Attributes
- aria-label - Automatically set based on action
- aria-pressed - Indicates active state
- title - Shows label and keyboard shortcut on hover