npx shadcn@latest add https://components.bksh.site/r/static-button.json

Static Button

A clean, Apple-style pill button — variants and sizes, pure CSS, no motion.

Example.tsx

import { StaticButton } from "@/components/better/static-button"

export function Example() {
  return (
    <StaticButton
      variant="primary"
      size="md"
      radius={40}
    >
      Buy
    </StaticButton>
  )
}

Dependencies

class-variance-authority

Props

Prop	Type	Default	Description
variant	"primary" \| "secondary" \| "outline" \| "ghost" \| "gradient"	"primary"	Visual style of the pill.
size	"sm" \| "md" \| "lg"	"md"	Padding and text size.
radius	number	—	Override the pill radius, in px (e.g. 8 for a soft rectangle, 0 for square).
gradientColors	string[]	—	`gradient` variant only: two or more colour stops, in order.
gradientAngle	number	—	`gradient` variant only: direction of the ramp, in degrees.

Also accepts all React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof staticButton> props.