Button Squircle
Tactile squircle button components featuring dynamic curvature morphing on hover with polymorphic Base UI render support.
3.4 KB
•Updated on September 12, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-button-squircleAnatomy
Code
import { Button } from '@/components/spaceui/button-squircle'
export default function Example() {
return (
<Button variant="primary">
<span>Click me</span>
</Button>
)
}Features
Sizes
Icon Sizes
Props
ButtonSquircle
| Prop | Type | Default | Description |
|---|---|---|---|
variant | primary|secondary|destructive|outline|ghost|icon|link | primary | Visual styling variant |
size | xs|sm|default|lg|icon-xs|icon-sm|icon|icon-lg | default | Dimensions and padding |
squircle | boolean | true | Enables continuous curvature corner squircle mask |
render | React.ReactElement|((props: any) => React.ReactNode) | - | Polymorphic Base UI render element (e.g. Next.js Link or <a>) |
full | boolean | false | Stretches button to 100% width (supports legacy asFull) |
icon | boolean | false | Adjusts svg sizing behavior for pure icon content (supports legacy asIcon) |
pointer | boolean | false | Applies explicit cursor-pointer styling (supports legacy asPointer) |
hover | boolean | false | Subtle hover scale tactile feedback (supports legacy whileTap) |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
Related Components
Glass ButtonButton
A glassmorphic button built on top of Button Squircle — backdrop blur, layered inset highlights and a hover shine sweep.
ViewPixel Fill ButtonButton
An interactive button whose background fills with square matrix pixels radiating from the cursor entry point on hover.
ViewSlide To ConfirmButton
Tactile slide-to-action control with spring physics and inertia confirmation.
View