Button

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

Installation

On This Page

Installation Usage Cursor Examples Size Default Outline Secondary Ghost Destructive Link Icon With Icon Rounded Spinner Button Group Link API Reference Button

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.

pnpm dlx shadcn@latest add button

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

<Button variant="outline">Button</Button>

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;
  }
}

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

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

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

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.

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

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

Remember to set the nativeButton prop to false if you're returning an element that is not a button.

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

Prop	Type	Default
`variant`	`"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"`	`"default"`
`size`	`"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"`	`"default"`

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

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

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

export function ButtonDefault() {

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

export function ButtonOutline() {

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

export function ButtonSecondary() {

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

export function ButtonGhost() {

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

export function ButtonDestructive() {

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

export function ButtonLink() {

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

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

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

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

"use client"

import * as React from "react"

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

export function ButtonRender() {