Browse components
Fuse Button
Hold to light a spark that burns along the border; if it makes it all the way round, it bursts. Works with Space and Enter.
Installation
npx shadcn@latest add @glint-ui/fuse-buttonFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/fuse-button.json
Usage
import { FuseButton } from "@/components/ui/fuse-button";
<FuseButton onComplete={() => launch()}>Hold to launch</FuseButton>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Button label. |
| duration | number | 1600 | Ms the button must be held. |
| color | string | "#fb923c" | Spark and burst color. |
| onComplete | ReactNode | — | Called once the fuse finishes burning. |
| className | string | — | Extra classes for the root element. |