The label is cut in two and the halves slide apart on hover, uncovering an alternate label or icon underneath.
Build the quiet side of the web.
npx shadcn@latest add https://hyperblur.dev/r/button-split-halves.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-split-halves.tsx.
import { ButtonSplitHalves } from "@/components/hyperblur/button-split-halves"
<ButtonSplitHalves reveal="12 open roles" axis="y">See openings</ButtonSplitHalves>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Default label, drawn on the two halves. |
| reveal | ReactNode | "Let's go" | Content shown in the gap once the halves part. |
| icon | ReactNode | Optional icon placed before the revealed content. | |
| axis | "x" | "y" | "y" | Direction the halves travel: y splits into top and bottom, x into left and right. |
| variant | "light" | "dark" | "accent" | "light" | Door color. The revealed layer uses the accent, or light on the accent variant. |
| 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. |
| open | boolean | false | Forces the split state, in addition to hover and focus. |
| 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. |