Navigation

Get Started

IntroductionInstallation

All Buttons

Double ShiftDelete Button3 D ConfettiAnimationMatrix ButtonNeon ButtonPlasma ButtonQuantum ButtonShadow ButtonShimmer ButtonTron ButtonPluse ButtonCosmic ButtonPluse Glow ButtonSurprising ButtonDonateNow ButtonShare Icon ButtonNoise Button3D ButtonGlass MorphismHexagoan ButtonMorph ButtonElectric ButtonPulse ButtonExpand ButtonSplit ButtonSquish ButtonScan ButtonCircuit BorderLaser BorderRadar ButtonDigital Frame Wave Button Liquid ButtonShockWaveRadial RippleFloating ButtonGradient Flow Solar GradientShift GradientPrism GradidentDancing TextReveal TextScramble TextText AnimationTypewritter EffectText GlitchIcon AnimationIcon MorphHover GlowingBackgroudFill Effect BackgroudSound Effect Pressable buttonMoving BorderHologram ButtonBounce ButtonTextAnimated ButtonCyber Button

Uplift UI Docs

Animated Delete Button

A playful, animated delete button with a trash can icon and per-character delete animation. Built with Framer Motion for delightful micro-interactions.

Demo

Interactive Demo

Hover over the button to see the animated delete effect.

Installation

Install the required dependencies to get started:

bash
Loading...

Usage

Import and use the AnimatedTrashDelete component in your Next.js application:

tsx
Loading...

Props

PropTypeDefaultDescription
childrenstring-The text content to be animated and deleted.
onDeleteComplete() => voidundefinedCallback function called after the delete animation completes.

Features

  • Animated trash can icon with success feedback
  • Per-character delete animation for text
  • Customizable button background and shadow
  • Accessible and keyboard-friendly
  • Built with Framer Motion for smooth transitions
  • TypeScript support out of the box
  • Dark mode compatible
  • Production-ready performance

Dependencies

Next.js 15+
Framer Motion
Lucide React
Tailwind CSS (recommended)
TypeScript (recommended)