UI/Button

Button

Triggers an action or event. Supports multiple visual variants, sizes, icon layouts, and loading states.

shadcn/uiRadix UIForm
01Installation
bash
npx shadcn@latest add button
02Import
import { Button } from "@/components/ui/button"
03Variants
04Sizes
05Icon Button
06Button with Icon
07Loading
08Props
PROPTYPEDEFAULTDESCRIPTION
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""default"Visual style of the button
size"sm" | "default" | "lg" | "icon" | "icon-sm" | "icon-lg""default"Size of the button
disabledbooleanfalsePrevents interaction and reduces opacity
asChildbooleanfalseMerges props onto child element via Slot