shadcn ui : Button Syntax

The Button component is shadcn's reference implementation of the cva-variant pattern. Every other variant-driven primitive (Badge, Alert, Toggle, ToggleGroup) follows the same shape. Mastering Button means mastering the shadcn variant API.

Quick Reference

Canonical call

import { Button } from "@/components/ui/button"

<Button variant="default" size="default">Save</Button>

variant and size are independent props. Both default to "default". Both are typed by VariantProps<typeof buttonVariants> so autocomplete reflects exactly the keys in the local buttonVariants cva definition.

Variant decision table