A round icon button that grows to reveal its label on hover or focus. The width animates, so neighboring items in a flex row glide aside.
Moodboard
Autumn campaign
npx shadcn@latest add https://hyperblur.dev/r/button-icon-slide-expand.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/button-icon-slide-expand.tsx.
import { ButtonIconSlideExpand } from "@/components/hyperblur/button-icon-slide-expand"
<ButtonIconSlideExpand variant="outline">Download</ButtonIconSlideExpand>| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Label revealed when the button expands. It stays in the accessibility tree while collapsed. |
| icon | ReactNode | Inline SVG or any node shown in the circle. Defaults to an arrow. | |
| variant | "solid" | "outline" | "ghost" | "solid" | Surface style. |
| 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 expanded 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. |