Button

Installation

npx shadcn@latest add @blank/button

Usage

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

<Button variant="outline">Button</Button>

Examples

Variants

Emphasis runs in four steps — solid, filled, bordered, transparent — plus a link. The names are shadcn's, so a block copied from anywhere renders the step its author meant.

Destructive

The same four steps against a destructive target. There is no separate "danger" component: pick the step you would have picked anyway and prefix it.

Sizes

24, 32, 36 and 40 px. Input, Select and the other controls use the same scale, so a button and a field in one row line up.

With icon

An icon-only button needs an aria-label; a leading or trailing icon does not.

Shape

Pill is the default and the shape every control shares. shape="rounded" keeps a 12px corner for dense toolbars.

Loading

As child

asChild hands the styling to whatever you render instead — a link, most of the time — so the button stays a single element in the accessibility tree.

API Reference

Button

Every button prop, plus:

buttonVariants

The cva function behind Button, for styling a link or any other element as a button: buttonVariants({ variant, size, shape }).