Button

Displays a button or a component that looks like a button.

Installation

npx shadcn@latest add button

Usage

Import and use the button component in your project.

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

export default function MyComponent() {
  return <Button>Click me</Button>
}

Examples

Default

The default button variant with primary styling.

Variants

Different button styles for various use cases.

Sizes

Different button sizes to fit various contexts.

Icon Buttons

Square buttons designed to hold icons.

With Icon

Buttons can contain icons alongside text.

Loading

Show loading state with a spinner icon.

As Child

Use the asChild prop to render the button as a child component like a Link.

Go to Components

API Reference

Props available for the Button component.

PropTypeDefaultDescription
variant"default" | "secondary" | "outline" | "ghost" | "link" | "destructive""default"The visual style of the button.
size"default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg""default"The size of the button.
asChildbooleanfalseRender as a child component (using Radix UI Slot).
disabledbooleanfalseWhether the button is disabled.
classNamestring-Additional CSS classes to apply.

Accessibility

Button component follows WAI-ARIA button pattern.

Keyboard Navigation

  • Space or Enter: Activates the button
  • Tab: Moves focus to or away from the button

Screen Reader Support

The button is announced as a button element by screen readers and includes proper disabled state announcements.