Button

Displays a button, or a component that looks like a button. Built on Base UI's button primitive.

Last updated August 7, 2026

CreditsModifiedPublished

Added the `loading` prop
Added the `blue` variant

Overview

import { Button } from "@/components/ui/button"
 
export function ButtonDefaultExample() {
  return <Button>Button</Button>
}

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/button.json

Usage

import { Button } from "@/components/ui/button"
 
export function Example() {
  return <Button variant="outline">Button</Button>
}

Sizes

Pass size to change the size of the button.

import { Button } from "@/components/ui/button"
 
export function ButtonSizeExample() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button size="xs">Extra small</Button>
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
    </div>
  )
}

Variants

Outline

import { Button } from "@/components/ui/button"
 
export function ButtonOutlineExample() {
  return <Button variant="outline">Button</Button>
}

Secondary

import { Button } from "@/components/ui/button"
 
export function ButtonSecondaryExample() {
  return <Button variant="secondary">Button</Button>
}

Ghost

import { Button } from "@/components/ui/button"
 
export function ButtonGhostExample() {
  return <Button variant="ghost">Button</Button>
}

Destructive

import { Button } from "@/components/ui/button"
 
export function ButtonDestructiveExample() {
  return <Button variant="destructive">Button</Button>
}

Link

import { Button } from "@/components/ui/button"
 
export function ButtonLinkExample() {
  return <Button variant="link">Button</Button>
}

Blue

import { Button } from "@/components/ui/button"
 
export function ButtonBlueExample() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="blue">Button</Button>
      <Button variant="blue-subtle">Button</Button>
    </div>
  )
}

Icon

import { PlusIcon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
 
export function ButtonIconExample() {
  return (
    <Button size="icon" aria-label="Add">
      <PlusIcon />
    </Button>
  )
}

With icon

Add data-icon="inline-start" or data-icon="inline-end" to the icon for the correct spacing.

import { MailIcon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
 
export function ButtonWithIconExample() {
  return (
    <Button>
      <MailIcon data-icon="inline-start" />
      Send email
    </Button>
  )
}

Rounded

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

import { Button } from "@/components/ui/button"
 
export function ButtonRoundedExample() {
  return <Button className="rounded-full">Button</Button>
}

Loading

Pass loading to show a spinner alongside the button's content and disable interaction. The spinner scales with the button's size.

import { Button } from "@/components/ui/button"
 
export function ButtonLoadingExample() {
  return <Button loading>Please wait</Button>
}

Add hideContentOnLoading to hide the content instead and show only a centered spinner.

import { Button } from "@/components/ui/button"
 
export function ButtonLoadingHideContentExample() {
  return (
    <Button loading hideContentOnLoading>
      Please wait
    </Button>
  )
}

As link

Use the buttonVariants helper to make a link look like a button. Base UI's Button always applies role="button", which overrides the semantic link role on <a> elements — use a plain <a> with buttonVariants instead.

Link

import { buttonVariants } from "@/components/ui/button"
import { cn } from "@workspace/ui/lib/utils"
 
export function ButtonRenderExample() {
  return (
    <a href="#" className={cn(buttonVariants({ variant: "outline" }))}>
      Link
    </a>
  )
}

Button Group

To create a button group, use the ButtonGroup component.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
 
export function ButtonGroupDemoExample() {
  return (
    <ButtonGroup>
      <Button variant="outline">Button 1</Button>
      <Button variant="outline">Button 2</Button>
    </ButtonGroup>
  )
}

RTL

import { ArrowLeftIcon } from "lucide-react"
 
import { Button } from "@/components/ui/button"
 
export function ButtonRtlExample() {
  return (
    <Button>
      <ArrowLeftIcon data-icon="inline-start" />
      بازگشت
    </Button>
  )
}

API Reference

Button

Prop	Type	Default	Description
variant	ButtonVariant	"default"	The visual style of the button.
size	ButtonSize	"default"	The size of the button.
loading	boolean	false	Shows a spinner alongside the button's content and disables interaction.
hideContentOnLoading	boolean	false	While loading, hide the button's content and show only a centered spinner.
disabled	boolean	false	Prevents interaction and dims the button.
render	ReactElement \| (props, state) => ReactElement	undefined	Renders a different element (e.g. a link) in place of the native button, keeping the same styles and behavior.

Edit this page on GitHub

PreviousBreadcrumb NextButton Group