Button

Composition preview

Try Button alongside its related actions components. These examples keep all actions local.

Usage

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

<>
<Button type="submit">Save changes</Button>
<Button type="button" variant="outline">Cancel</Button>
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

variant: default, outline, secondary, ghost, destructive, link; size: xs, sm, default, lg, icon variants; asChild; disabled

Usage & accessibility

Use an accessible name for icon actions. Keep a visible focus indicator.

Implementation contract

src/components/ui/button.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.