PlayButton
Specialized media control button with play/pause state visualization and audio-visual feedback
PlayButton
Animated play / pause button with smooth transitions, multiple variants, sizes and attention-drawing effects.
Variants
Use the variant prop to match the PlayButton with your theme or semantic intent.
Default
Primary
Secondary
Accent
Info
Success
Warning
Error
Glass
Sizes
Use size to adjust the PlayButton for toolbars, timelines or hero sections.
Small
Medium
Large
Extra large
Controlled state
Use isPlaying and onToggle to fully control playback state from React.
Play / pause with external control
Paused
Effects & features
Enable subtle attention effects like pulse and glow to highlight active or primary media controls.
Pulse effect
Glow effect
Paused with pulse + glow
Real-world examples
Integrate PlayButton into cards, media lists and dashboards for videos, music tracks and podcasts.
Media cards
UI Motion Reel
2:30 · Paused
Midnight Drive
Synthwave · 3:42
Product Stories
Episode 42 – Designing calm interfaces
25:30 / 45:00
Usage Guidelines
When to Use
- Video players
- Audio players
- Media controls
Accessibility
- Play/pause state announced
- Media control role
Performance
- Single state update
- CSS transitions
Common Mistakes
- No visual state difference
- Missing keyboard handler
Frequently Asked Questions
Related Components
View allPrimary action component with variant system, size options, loading states, icon slots, and optional shimmer effects
Grouped button layout with shared borders, orientation control, and seamless visual connection between actions
Fixed-position FAB for primary screen actions with animation, positioning options, and extended label support
Icon-only button with size variants, accessibility labels, and interaction states