Tap to run the main action, or long-press to open a radial menu around the button and drag toward an option to pick it on release. A ring fills during the hold and a beam follows your finger.
npx shadcn@latest add https://hyperblur.dev/r/button-press-radial.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-press-radial.tsx.
import { ButtonPressRadial } from "@/components/hyperblur/button-press-radial"
<ButtonPressRadial onPress={() => send()} onSelect={(id) => sendWith(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| options | { id: string; label: string; icon?: ReactNode }[] | schedule, silent, draft, disappearing | Options placed along the arc in order. |
| label | string | "Send" | Accessible label of the main button. |
| icon | ReactNode | send icon | Icon inside the main button. |
| holdTime | number | 480 | Milliseconds of pressing before the menu opens. |
| radius | number | 84 | Distance of the options from the button center. |
| startAngle | number | 165 | Angle of the first option in degrees, 0 is right and 90 is up. |
| endAngle | number | 15 | Angle of the last option. Use 180 to 90 for a bottom-right corner. |
| accent | string | "#2f7bff" | Main button, hold ring and highlight color. |
| onPress | () => void | undefined | Called on a short tap or click. |
| onSelect | (id: string) => void | undefined | Called with the chosen option id. |
| onOpenChange | (open: boolean) => void | undefined | Called when the radial menu opens or closes. |
| disabled | boolean | false | Disables interaction and dims the control. |