Play Pause Button

Install the GSAP dependency

npm install gsap

Add the component

npx shadcn@latest add https://glsilk.vercel.app/r/play-pause-button.json

Quick Start

app/page.tsx

import { PlayPauseButton } from "@/components/ui/play-pause-button";

export default function Home() {
  return (
    <div>
      <PlayPauseButton />
    </div>
  );
}

Examples

Default

Open in

<PlayPauseButton />

Sizes

Open in

<div className="flex gap-2">
  <PlayPauseButton size="sm" variant="outline" showText>
    Play
  </PlayPauseButton>
  <PlayPauseButton size="icon-sm" variant="outline" />
</div>

<div className="flex gap-2">
  <PlayPauseButton variant="outline" showText>
    Pause
  </PlayPauseButton>
  <PlayPauseButton size="icon" variant="outline" />
</div>

<div className="flex gap-2">
  <PlayPauseButton size="lg" variant="outline" showText>
    Play
  </PlayPauseButton>
  <PlayPauseButton size="icon-lg" variant="outline" />
</div>

Variants

Open in

<div className="flex flex-wrap gap-2">
  <PlayPauseButton variant="default" showText />
  <PlayPauseButton variant="outline" showText />
  <PlayPauseButton variant="secondary" showText />
  <PlayPauseButton variant="ghost" showText />
</div>

Icon Variants

Open in

<div className="flex flex-wrap gap-2">
  <PlayPauseButton variant="default" size="icon" />
  <PlayPauseButton variant="outline" size="icon" />
  <PlayPauseButton variant="secondary" size="icon" />
  <PlayPauseButton variant="ghost" size="icon" />
</div>

Rounded

Open in

<div className="flex gap-4">
  <PlayPauseButton variant="outline" size="icon" className="rounded-full" />
  <PlayPauseButton variant="default" size="icon" className="rounded-full" />
  <PlayPauseButton variant="secondary" size="icon" className="rounded-full" />
</div>

API Reference

Prop

Type

Credits

GSAP: greensock.com
Icons: lucide-react