Button

Button with six intent variants and four sizes. Polymorphic via the Base UI render prop.

Preview

Installation

bash

npx shadcn@latest add @layout/button

Usage

tsx

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

Examples

Sizes

With icons

Loading and disabled states

Render as link

Visit layout.design Read the docs

Guidelines for AI agents

Primary actions use the default variant; one default button per view section. Secondary and outline are for supporting actions, ghost for toolbars and dense UI, destructive only for irreversible actions, link for inline navigation. Use render={<a href/>} to render as a link.

Never

Neverhardcode colours; variants already map to intent tokens
Neverplace two default-variant buttons in the same action group
Neveruse destructive for cancel/dismiss actions
Neveroverride border-radius directly; it derives from --layout-radius

Tokens consumed

--layout-primary--layout-primary-fg--layout-secondary--layout-secondary-fg--layout-accent--layout-accent-fg--layout-danger--layout-danger-fg--layout-input--layout-ring--layout-radius--layout-shadow-xs--layout-duration-base