Button
CVA variants with spring hover and tap feedback. Forwards ref and standard button attributes — aligned with your theme tokens.
Live preview
Win the press,thenthe break— that's the half in two beats.
Shape it above · Press on purpose · Ripple follows
Install
v0
Ship the registry bundle to v0 and iterate on motion or layout with prompts.
Usage
Minimal example — see tile 05 for variant, size, and peer packages.
import { Button } from "@/components/ui/button";
export function SaveBar() {
return (
<div className="flex gap-2">
<Button>Save</Button>
<Button variant="outline">Cancel</Button>
</div>
);
}Dependencies
Registry peers and API surface — Button is a forwardRef motion.button.
variant
CVA-driven styles: default, destructive, outline, secondary, ghost, link — same vocabulary as typical shadcn buttons, tuned for motion and theme tokens.
size
sm, md (default), lg, or custom (empty padding/height classes so you can size entirely with className).
Native button props
Spreads onto motion.button: type, disabled, onClick, aria-*, data-*, etc. Ref forwarded for focus management or form libraries.
buttonVariants
Exported CVA config — compose the same classes on links or divs if you need a non-button affordance with matching visuals.
framer-motion
motion.button drives the control; pointer ripples expand from the press point and fade out. Respects reduced motion (no ripple).
class-variance-authority
Variant and size maps merge with the base layout/ring/disabled classes. Install is listed as a registry peer dependency.
Accessibility
focus-visible:ring-2 ring-ring matches the rest of the kit. Defaults to type="button" so it does not submit forms; pass type="submit" when it should.
shadcn registry
Add with the CLI; framer-motion and class-variance-authority are declared so they install alongside the component file.