A pill button with a conic gradient comet orbiting its edge around a solid inner face. The border spins all the time or only on hover.
$ hyperblur build
42 files compiled in 3.1s
edge network ready in 6 regions
npx shadcn@latest add https://hyperblur.dev/r/button-border-spin.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-border-spin.tsx.
import { ButtonBorderSpin } from "@/components/hyperblur/button-border-spin"
<ButtonBorderSpin variant="dark" spin="always">Deploy to production</ButtonBorderSpin>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Button label. |
| variant | "dark" | "light" | "accent" | "dark" | Face color. The comet uses the accent on dark and light faces and white on the accent face. |
| 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. |
| spin | "always" | "hover" | "always" | Spin continuously, or fade the comet in and spin only while hovered or focused. |
| duration | number | 3 | Seconds for one full turn. |
| 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. |