Button

An interactive element that triggers an action or event when clicked. Provides multiple visual styles (variants) and can incorporate icons or act as a link.

This preview shows the default Button component style.

Installation

To use the Button component in your project, you need to install it. You have two options: using the CLI (Command Line Interface) for a quick setup, or following the Manual steps for more control and understanding.

The CLI command is the easiest way to add the Button component. It automatically handles downloading the necessary code and dependencies for you. Running this command in your project's terminal will add the button component files.

npx shadcn@latest add button

Usage

Once installed, import the Button component and use it in your application.

You can apply different visual styles using the variant prop and adjust the size using the size prop.

<Button variant="outline" size="lg">
  Outline Button
</Button>

Using as a Link

There are two ways to make a button behave like a link (<a> tag) while retaining button styling:

Using buttonVariants Helper: Import buttonVariants and apply the generated classes to your link component (e.g., Next.js <Link>). This is useful if you need more control over the link element itself.

import Link from "next/link";
import { Button, buttonVariants } from "@/components/ui/button";

<Link href="/your-path" className={buttonVariants({ variant: "outline" })}>
  Link Styled as Button
</Link>

Using asChild Prop: Add the asChild prop to the Button component and nest your link component directly inside. The Button will pass its props down to the Link, effectively rendering the Link as a styled button. This is often simpler for basic link buttons.
```
import Link from "next/link";
import { Button } from "@/components/ui/button";
```
```
<Button variant="secondary" asChild>
  <Link href="/login">Login</Link>
</Button>
```

Examples

The Button component comes with several pre-defined variants and can be customized further.

Primary (Default)

The standard, most prominent button style.

Secondary

A less emphasized button style for secondary actions.

Destructive

Used for actions that have potentially negative consequences (e.g., delete, remove).

Outline

A button with a border and transparent background, often used for tertiary actions.

Ghost

A button with no background or border, typically used for low-emphasis actions within text or other components.

Link

A button styled to look like a standard hyperlink.

Icon Button

A compact button containing only an icon, often used in toolbars or tight spaces. Requires setting a specific size (e.g., size="icon").

Button With Icon

A standard button that includes an icon alongside text for enhanced visual communication.

Loading State

Shows how to indicate an ongoing process by disabling the button and displaying a loading spinner.

As Child (Link Example)

Demonstrates using the asChild prop to render a Next.js <Link> component with button styling.

Changelog

2024-10-16 Classes for icons

Added gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 to the button to automatically style icon inside the button.

Add the following classes to the cva call in your button.tsx file.

const buttonVariants = cva(
  "inline-flex ... gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
)

Breadcrumb Calendar