Button

Trigger an action or submit a form.

Purpose

Trigger an action or submit a form.

When to use

Trigger an immediate action.
Submit a form.

When not to use

Use a link for navigation.
Avoid competing primary actions.

Install

pnpm dlx shadcn@4.23.0 add @kaotypr-ui/button

Examples

Variants

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

export function ButtonVariants() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button>Default</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Sizes

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

export function ButtonSizes() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Button size="xs">Extra small</Button>
      <Button size="sm">Small</Button>
      <Button>Default</Button>
      <Button size="lg">Large</Button>
    </div>
  );
}

Props and variants

Prop	Values	Default	Notes
`variant`	default, outline, secondary, ghost, destructive, link	default	Visual emphasis.
`size`	default, xs, sm, lg, icon, icon-xs, icon-sm, icon-lg	default	Default and icon heights use --density-control-h; rounded-button supplies the pill shape.

For unchanged APIs, see Radix and shadcn.

States

Default
Hover
Focus visible
Active
Disabled
Invalid
Expanded (outline, secondary and ghost)

Keyboard

Key	Action
Tab	Focus the button.
Enter or Space	Activate the button.

Accessibility notes

Give icon-only buttons an accessible name.
Use a descriptive action label.

Do and don’t

Do

Keep the default pill shape for a consistent action.

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

export function ButtonDoPill() {
  return <Button>Save changes</Button>;
}

Don’t

Square corners break the button shape convention.

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

export function ButtonDontSquare() {
  return <Button className="rounded-none">Save changes</Button>;
}

Source release

Revision 15b921e27444eb596901fc1a7d45cb5760cf0abd

Path components/ui/button.tsx

Status pristine