Component

Button

Triggers actions, submits forms, or navigates. The most fundamental interactive element in the system.

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/button

Usage

Use buttons to initiate actions. Choose the variant that reflects the importance of the action.

Playground

Preview

Configure

Variant

Size

Label

Button text

Icon

Icon only, or paired with label on the left or right, not both sides

Disabled

Code

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

<Button>Button</Button>

Variants & States

Supported variants, sizes, and interaction states for this component.

Variants

Choose the variant that matches the action's emphasis.

Default
Secondary
Outline
Ghost
Destructive
Link

Sizes

Scale buttons to match surrounding density. Use icon sizes for icon-only controls.

Extra small (`xs`)
Small (`sm`)
Default
Large (`lg`)
Icon (`icon`, `icon-xs`, `icon-sm`, `icon-lg`)

States

Hover and disabled states communicate interactivity and availability.

Default
Hover
Disabled

Props

Prop	Type	Default value	Description
variant	"default" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"	"default"	Visual treatment for the button.
size	"xs" \| "sm" \| "default" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"	"default"	Controls height, padding, and icon sizing. Use an icon size for icon-only buttons.
disabled	boolean	false	Prevents interaction and applies disabled styling.
children	ReactNode	,	Button label or icon content. Pair size="icon" with an icon and aria-label.
className	string	,	Additional classes merged onto the root element.

Do

Use default for primary actions, one per view
Use outline or ghost for secondary actions
Use destructive for irreversible actions like delete

Don't

Don't use more than one primary button per section
Don't use link variant for navigation within forms