106k
New

Button

PreviousNext

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

Radix UIBase UI
Radix UI
import { Button } from "@/components/ui/button"
import { ArrowUpIcon } from "lucide-react"

Installation

pnpm dlx shadcn@latest add button

Usage

import { Button } from "@/components/ui/button"
<Button variant="outline">Button</Button>

Cursor

Tailwind v4 switched from cursor: pointer to cursor: default for the button component.

If you want to keep the cursor: pointer behavior, add the following code to your CSS file:

globals.css
@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }
}

Examples

Size

Use the size prop to change the size of the button.

import { Button } from "@/components/ui/button"
import { ArrowUpRightIcon } from "lucide-react"

Default

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

export function ButtonDefault() {

Outline

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

export function ButtonOutline() {

Secondary

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

export function ButtonSecondary() {

Ghost

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

export function ButtonGhost() {

Destructive

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

export function ButtonDestructive() {

Link

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

export function ButtonLink() {

Icon

import { Button } from "@/components/ui/button"
import { CircleFadingArrowUpIcon } from "lucide-react"

With Icon

Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the icon for the correct spacing.

import { Button } from "@/components/ui/button"
import { IconGitBranch } from "@tabler/icons-react"

Rounded

Use the rounded-full class to make the button rounded.

import { Button } from "@/components/ui/button"
import { ArrowUpIcon } from "lucide-react"

Spinner

Render a <Spinner /> component inside the button to show a loading state. Remember to add the data-icon="inline-start" or data-icon="inline-end" attribute to the spinner for the correct spacing.

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

Button Group

To create a button group, use the ButtonGroup component. See the Button Group documentation for more details.

"use client"

import * as React from "react"

Link

You can use the asChild prop on <Button /> to make another component look like a button. Here's an example of a link that looks like a button.

Login
import Link from "next/link"
import { Button } from "@/components/ui/button"

API Reference

Button

The Button component is a wrapper around the button element that adds a variety of styles and functionality.

PropTypeDefault
variant"default" | "outline" | "ghost" | "destructive" | "secondary" | "link""default"
size"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg""default"
asChildbooleanfalse