Button

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

import { ArrowUpRightIcon } from "lucide-react"

import * as Button from "@/components/ui/button"

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2 md:flex-row">
      <Button.Root variant="secondary" appearance="bordered">
        Button
      </Button.Root>
      <Button.Root variant="secondary" appearance="bordered" size="icon-lg">
        <ArrowUpRightIcon />
      </Button.Root>
    </div>
  )
}

Installation


pnpm dlx shadcn@latest add button

Usage

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

<Button.Root variant="primary" appearance="filled">
  Button
</Button.Root>

Examples

Primary Variant

import * as Button from "@/components/ui/button"

export function ButtonPrimary() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button.Root appearance="filled">Learn More</Button.Root>
      <Button.Root appearance="bordered">Learn More</Button.Root>
      <Button.Root appearance="muted">Learn More</Button.Root>
      <Button.Root appearance="ghost">Learn More</Button.Root>
    </div>
  )
}

Secondary Variant

import * as Button from "@/components/ui/button"

export function ButtonSecondary() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button.Root variant="secondary" appearance="filled">
        Learn More
      </Button.Root>
      <Button.Root variant="secondary" appearance="bordered">
        Learn More
      </Button.Root>
      <Button.Root variant="secondary" appearance="muted">
        Learn More
      </Button.Root>
      <Button.Root variant="secondary" appearance="ghost">
        Learn More
      </Button.Root>
    </div>
  )
}

Error Variant

import * as Button from "@/components/ui/button"

export function ButtonError() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button.Root variant="error" appearance="filled">
        Learn More
      </Button.Root>
      <Button.Root variant="error" appearance="bordered">
        Learn More
      </Button.Root>
      <Button.Root variant="error" appearance="muted">
        Learn More
      </Button.Root>
      <Button.Root variant="error" appearance="ghost">
        Learn More
      </Button.Root>
    </div>
  )
}

Disabled

import * as Button from "@/components/ui/button"

export function ButtonDisabled() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button.Root variant="secondary" isDisabled>
        Disabled
      </Button.Root>
      <Button.Root variant="secondary" appearance="bordered" isDisabled>
        Disabled
      </Button.Root>
      <Button.Root variant="secondary" appearance="muted" isDisabled>
        Disabled
      </Button.Root>
      <Button.Root variant="secondary" appearance="ghost" isDisabled>
        Disabled
      </Button.Root>
    </div>
  )
}

Sizes

"use client"

import { ArrowUpRightIcon } from "lucide-react"

import * as Button from "@/components/ui/button"

export function ButtonSizes() {
  return (
    <div className="flex flex-col items-start gap-8 sm:flex-row">
      <div className="flex items-start gap-2">
        <Button.Root variant="secondary" appearance="bordered" size="xs">
          Xsmall
        </Button.Root>
        <Button.Root variant="secondary" appearance="bordered" size="icon-xs">
          <ArrowUpRightIcon />
        </Button.Root>
      </div>
      <div className="flex items-start gap-2">
        <Button.Root variant="secondary" appearance="bordered" size="sm">
          Small
        </Button.Root>
        <Button.Root variant="secondary" appearance="bordered" size="icon-sm">
          <ArrowUpRightIcon />
        </Button.Root>
      </div>
      <div className="flex items-start gap-2">
        <Button.Root variant="secondary" appearance="bordered" size="md">
          Medium
        </Button.Root>
        <Button.Root variant="secondary" appearance="bordered" size="icon-md">
          <ArrowUpRightIcon />
        </Button.Root>
      </div>
      <div className="flex items-start gap-2">
        <Button.Root variant="secondary" appearance="bordered" size="lg">
          Large
        </Button.Root>
        <Button.Root variant="secondary" appearance="bordered" size="icon-lg">
          <ArrowUpRightIcon />
        </Button.Root>
      </div>
    </div>
  )
}

With Icon

"use client"

import { ChevronDown, ChevronLeft, ChevronRight } from "lucide-react"

import * as Button from "@/components/ui/button"

export function ButtonWithIcon() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button.Root variant="secondary" appearance="bordered">
        <ChevronLeft />
        Button
      </Button.Root>
      <Button.Root variant="secondary" appearance="bordered">
        Button
        <ChevronRight />
      </Button.Root>
      <Button.Root variant="secondary" appearance="bordered" size="icon-lg">
        <ChevronDown />
      </Button.Root>
    </div>
  )
}

Icon Only

"use client"

import { Copy } from "lucide-react"

import * as Button from "@/components/ui/button"

export function ButtonIconOnly() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Button.Root variant="secondary" appearance="bordered" size="icon-xs">
        <Copy />
      </Button.Root>
      <Button.Root variant="secondary" appearance="bordered" size="icon-sm">
        <Copy />
      </Button.Root>
      <Button.Root variant="secondary" appearance="bordered" size="icon-md">
        <Copy />
      </Button.Root>
      <Button.Root variant="secondary" appearance="bordered" size="icon-lg">
        <Copy />
      </Button.Root>
    </div>
  )
}

Loading

import * as Button from "@/components/ui/button"
import * as Loader from "@/components/ui/loader"

export function ButtonLoading() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button.Root appearance="bordered" variant="secondary" isDisabled>
        <Loader.Root status="secondary" />
        Loading...
      </Button.Root>
    </div>
  )
}

Full Width

import * as Button from "@/components/ui/button"

export function ButtonFullWidth() {
  return (
    <div className="mx-auto flex w-full max-w-96 flex-col items-center gap-4">
      <Button.Root variant="secondary" className="w-full">
        Learn more
      </Button.Root>
      <Button.Root variant="secondary" className="w-full" appearance="bordered">
        Learn more
      </Button.Root>
      <Button.Root variant="secondary" className="w-full" appearance="muted">
        Learn more
      </Button.Root>
      <Button.Root variant="secondary" className="w-full" appearance="ghost">
        Learn more
      </Button.Root>
    </div>
  )
}

Rounded

"use client"

import { ArrowUpRightIcon } from "lucide-react"

import * as Button from "@/components/ui/button"

export function ButtonRounded() {
  return (
    <div className="flex flex-col items-start gap-8 sm:flex-row">
      <div className="flex items-start gap-2">
        <Button.Root
          variant="secondary"
          appearance="bordered"
          className="rounded-full"
          size="xs"
        >
          Xsmall
        </Button.Root>
        <Button.Root
          variant="secondary"
          appearance="bordered"
          className="rounded-full"
          size="icon-xs"
        >
          <ArrowUpRightIcon />
        </Button.Root>
      </div>
      <div className="flex items-start gap-2">
        <Button.Root
          variant="secondary"
          appearance="bordered"
          className="rounded-full"
          size="sm"
        >
          Small
        </Button.Root>
        <Button.Root
          variant="secondary"
          appearance="bordered"
          className="rounded-full"
          size="icon-sm"
        >
          <ArrowUpRightIcon />
        </Button.Root>
      </div>
      <div className="flex items-start gap-2">
        <Button.Root
          variant="secondary"
          appearance="bordered"
          className="rounded-full"
          size="md"
        >
          Medium
        </Button.Root>
        <Button.Root
          variant="secondary"
          appearance="bordered"
          className="rounded-full"
          size="icon-md"
        >
          <ArrowUpRightIcon />
        </Button.Root>
      </div>
      <div className="flex items-start gap-2">
        <Button.Root
          variant="secondary"
          appearance="bordered"
          className="rounded-full"
          size="lg"
        >
          Large
        </Button.Root>
        <Button.Root
          variant="secondary"
          appearance="bordered"
          className="rounded-full"
          size="icon-lg"
        >
          <ArrowUpRightIcon />
        </Button.Root>
      </div>
    </div>
  )
}

As Child

import * as Button from "@/components/ui/button"

export function ButtonAsChild() {
  return (
    <div className="flex flex-col items-center gap-4">
      <Button.Root variant="secondary" appearance="bordered">
        <a href="#">As link</a>
      </Button.Root>
    </div>
  )
}

Props

Button.Root

This component is based on React Aria's Button component and supports all of its props.

Prop

Type

Default

variant

primary

secondary

error

primary

appearance

filled

bordered

muted

ghost

filled

size

xs

sm

md

lg

icon-xs

icon-sm

icon-md

icon-lg

asChild

boolean

false

className

string

children

ReactNode | ((props: ButtonRenderProps) => ReactNode)

Button Group Checkbox

On This Page

Installation Usage Examples Primary Variant Secondary Variant Error Variant Disabled Sizes With Icon Icon Only Loading Full Width Rounded As Child Props Button.Root