UI components / Buttons
Confetti Button: a React and Tailwind UI component
A click bursts colourful confetti from the button, then it settles into a done state.
Open the live Confetti Button preview.
About buttons components
Buttons carry the most important action on a page, so motion here should confirm the click rather than decorate it. Keep the label short, keep the hit area at least 44 pixels tall on touch screens, and make sure the focus ring stays visible when someone tabs to it.
Install the Confetti Button
- Create
components/ui/confetti-button.tsxin your React + Tailwind project. - Paste the code. It only imports React; keyframes are defined inside the file.
- Import the named component where you need it. The default export is a ready-made demo you can delete.
Frequently asked questions
Is the Confetti Button component free?
Yes. Anyone can open the live preview and copy the code.
What do I need to use it?
A React project with Tailwind CSS: Next.js, Vite, Lovable or Bolt. The file only imports React; its animations ship inside the component.
Is it accessible?
It uses native elements and ARIA attributes where needed, keeps keyboard focus visible and works without a mouse.
More buttons
- Shimmer Button: A pill button with a light sweep across it and a soft glow on hover.
- Magnetic Button: The button and its label lean toward the cursor, then spring back.
- Gradient Border Button: A rotating conic gradient traces the border; the inside stays solid.
- Hold-to-Confirm Button: Press and hold to fill the button; letting go early cancels. Ideal for destructive actions.
- Copy Button: Copies to the clipboard; the icon morphs into a check and a small toast confirms.
- Ripple Button: Every click sends a ripple out from the exact point you pressed.