Back to components
Play Pause Button React component

What is this?

Just the play/pause button: a black circle inside a white ring. The triangle and the two bars turn into each other on every press. It only reports the state, so wire it to your own audio or video. Swap the labels, then drop it onto a video thumbnail or a podcast row.

Component

Play Pause Button

Just the play/pause button: a black circle inside a white ring. The triangle and the two bars turn into each other on every press. It only reports the state, so wire it to your own audio or video. Swap the labels, then drop it onto a video thumbnail or a podcast row.

Checking access…
Live Preview

Verified Technical Spec

Animation
CSS / Tailwind
Reduced motion
Verified
Keyboard focus
Verified
Compatibility
Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible

Included

  • Copy source into Cursor or Claude for agent install
  • Finished React · TypeScript · Tailwind CSS UI

Dependencies

  • React 19.0.0
  • Typescript 5.7.2
  • Tailwindcss 3.4.16

Tech Stack

  • React
  • TypeScript
  • Tailwind CSS

Version 1.0.0