A button whose click ripple spreads from the exact pointer position and takes its ink color from the variant. Keyboard activation ripples from the center.
Pro plan
$108 / year
Unlimited projects, priority builds and team seats.
npx shadcn@latest add https://hyperblur.dev/r/button-ink-ripple.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-ink-ripple.tsx.
import { ButtonInkRipple } from "@/components/hyperblur/button-ink-ripple"
<ButtonInkRipple variant="solid" onClick={() => console.log("saved")}>Save changes</ButtonInkRipple>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Button label. |
| variant | "solid" | "outline" | "ghost" | "solid" | Surface style. Solid ripples in white, outline and ghost ripple in a tint of the accent. |
| accent | string | "#2f7bff" | Brand color used for fills, borders, rings and the focus outline. |
| size | "sm" | "md" | "lg" | "md" | Height, padding and font size preset. |
| idle | boolean | false | Fires a ripple from a scripted point every few seconds while the pointer is away. Useful for previews. |
| loading | boolean | false | Shows a spinner, sets aria-busy and ignores clicks while true. |
| disabled | boolean | false | Dims the button and removes it from interaction. |