Astra

Hold Button

Hold-to-confirm button whose liquid fill rises while pressed and snaps back if you let go.

Hold Button, a Astra component

Use Hold Button in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/HoldButton-TS-TW
How to install Astra components

Related components

  • Fuse Button

    Action button whose done state carries an undo on a burning fuse.

  • Paper Crumple

    An image that crumples into a textured 3D sheet while you hold and drag it.

  • Pulse Heart

    Like button that contracts to a dot, flips colour and pulses back as the count ticks over.