Button

Interactive button component with 6 variants (default, outline, secondary, ghost, destructive, link), 8 sizes (xs, sm, default, lg, icon, icon-xs, icon-sm, icon-lg), loading state with Spinner, and support for icons.

Figma: DS-001 Foundations · 37:931

Import

Live Demo

Interactive examples of button variants, sizes, and states.

Default size — all variants

With icons

Loading state

Small size — all variants

Extra-small size — all variants

Large size — all variants

Icon-only — all sizes × selected variants

Props

NameTypeDefaultDescription
variant"default" | "outline" | "secondary" | "ghost" | "destructive" | "link""default"The visual style variant of the button
size"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"The size of the button
loadingbooleanfalseWhen true, shows a spinner and disables the button
disabledbooleanfalseWhen true, prevents interaction with the button
asChildbooleanfalseMerge props onto child element using Radix Slot

Examples

Basic Button

The simplest button usage.

Button Variants

Buttons come in 6 different visual styles.

Button Sizes

Available in 8 different sizes including icon-only variants.

Loading State

Show a spinner and disable interactions while loading.

With Icons

Use data-icon attribute to position icons inline.