Docs
→
Button
→
Gooey Button

Gooey Button

Delete button with gooey close effect and confirm state.

by Sarthak Kapila

Delete

Confirm

Installation

Usage

Gooey Button Example

1import GooeyButton from "@/components/goey-button";
2

3export default function Example() {
4  return <GooeyButton />
5}

Understanding the component

The button transitions from a primary "Delete" state to a "Confirm" state. A circular close button uses an SVG filter to apply a gooey effect when overlapping the main button.

Props

PropTypeDefaultDescription
onDelete() => void-Called when the confirm action is clicked.
onCancel() => void-Called when the close action is clicked.