Preview
Props
Install
npx shadcn@latest add @evilbuttons/minecraft-buttonimport { Pixelify_Sans } from "next/font/google";
const pixel = Pixelify_Sans({ variable: "--font-pixel", subsets: ["latin"] });
// <html className={pixel.variable}>Usage
import { MinecraftButton } from "@/components/evil-buttons/minecraft-button";
export function ButtonDemo() {
return (
<MinecraftButton
tapsPerStage={5}
stages={4}
onCrack={(stage) => console.log("Crack stage", stage)}
onBreak={() => console.log("Broken.")}
>
Singleplayer
</MinecraftButton>
);
}Props
The component spreads native button props. onClick fires on every tap before it counts; call event.preventDefault() to skip that tap.
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | - | Button label. Falls back to label. |
label | React.ReactNode | "Singleplayer" | Label used when no children are provided. |
tapsPerStage | number | 5 | Taps needed to advance one crack stage. |
stages | number | 4 | Stages until it breaks. The button breaks after tapsPerStage * stages taps. |
sound | boolean | true | Play synthesized dig, crack, break, and pickup sounds (Web Audio, no files). |
pickaxe | boolean | true | Swap the mouse cursor for a pixel pickaxe that winds up on press and strikes on release. |
respawnAfter | number | - | Respawn automatically after this many ms. Omit to wait for the drop to be picked up. |
onCrack | (stage: number) => void | - | Fired when the crack deepens to a new stage. |
onBreak | () => void | - | Fired when the button breaks. |
onRespawn | () => void | - | Fired when the button comes back. |
className | string | - | Extra classes merged onto the button. |
Good to know
- Everything snaps to a 3px texel grid.
- The pickaxe cursor shows for mouse and pen, never touch.