A chunky tactile button with a solid depth edge. It squashes flat on press and springs back with overshoot.
Greetings and small talk
npx shadcn@latest add https://hyperblur.dev/r/button-3d-press.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-3d-press.tsx.
import { Button3dPress } from "@/components/hyperblur/button-3d-press"
<Button3dPress accent="#2f7bff">Continue</Button3dPress>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | "Continue" | Button label. |
| variant | "solid" | "light" | "solid" | Accent face with a darker edge, or a light face with a grey edge. |
| accent | string | "#2f7bff" | Accent color used for the focus ring, highlights and the solid variant. |
| size | "sm" | "md" | "lg" | "md" | Font size and padding preset. |
| depth | number | 6 | Height of the depth edge in pixels. Minimum 2. |
| loading | boolean | false | Shows a spinner, sets aria-busy and blocks clicks. |
| disabled | boolean | false | Disables the button and dims it. |