Component 026Buttons

Hungry Delete

Two playful delete buttons swallow their letters into a hungry bin, then celebrate success or spit the word back out.

Press either Delete button to see the success or failure sequence.

Micro-interaction Nº 02

Press a button. The bin eats the word.

Succeeds

Fails · spits it back

18 letters eaten

Loading preview…

Live interactive previewExplore the interaction, then make it yours.

Quick start

Make it yours.

Save hungry-delete.tsx in your components folder, then import it below. Requires React and Tailwind CSS.

TSXapp/page.tsx

import HungryDelete from "@/components/ui/hungry-delete";

export default function Example() {
  return <HungryDelete />;
}

Behind the interaction

Designed to explore, ready to adapt.

Each letter jumps into the bin before the pill collapses into a loading circle.

The black button completes its action; the blue button demonstrates failure and recovery.

Connect an asynchronous callback to your own action, with pending, success, and failure feedback.

Keep exploring