Button Squircle

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-spaceui-button-squircle

pnpm dlx shadcn@latest add @spaceui/components-spaceui-button-squircle

Anatomy

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`)

Button Squircle

Installation

Anatomy

Features

Sizes

Icon Sizes

Props

ButtonSquircle

Keep in mind

Related Components