The house button: interruptible press physics, optical icon alignment, a static prop to opt out of motion.
npx shadcn@latest add @paragon/buttonimport * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium whitespace-nowrap transition-[scale,background-color,box-shadow] duration-150 ease-out outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
outline:
"bg-card shadow-border hover:shadow-border-hover dark:bg-secondary/30",
ghost: "hover:bg-accent hover:text-accent-foreground",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 has-[>svg:first-child]:pl-3.5",
sm: "h-8 px-3 text-[13px] has-[>svg:first-child]:pl-2.5",
lg: "h-10 px-5 has-[>svg:first-child]:pl-4",
icon: "size-9",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
},
);
export interface ButtonProps
extends React.ComponentProps<"button">,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
/** Disables press-scale feedback where the motion would distract. */
static?: boolean;
}
function Button({
className,
variant,
size,
asChild = false,
static: isStatic = false,
...props
}: ButtonProps) {
const Comp = asChild ? Slot : "button";
return (
<Comp
data-slot="button"
className={cn(
buttonVariants({ variant, size }),
!isStatic && "active:not-disabled:scale-[0.97]",
className,
)}
{...props}
/>
);
}
export { Button, buttonVariants };