# Button

> A button built on Base UI, with Facade styles. Every size is at least 44 by 44 pixels.

Facade UI item `button` (ui, atom).
Docs page: https://facadeui.dev/components/button · Registry JSON: https://facadeui.dev/r/button.json

## Install

```bash
npx shadcn@latest add @facade/button
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/button.json`. The CLI also installs what it needs: @base-ui-components/react@1.0.0-rc.0, class-variance-authority@^0.7.1, lucide-react@^1.47.0, @facade/utils.

Files: `components/ui/button.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/button-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { ArrowRightIcon } from "lucide-react"

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

export function Demo() {
  return (
    <div className="flex flex-col gap-8">
      <div className="flex flex-wrap items-center gap-3">
        <Button>Start building</Button>
        <Button variant="secondary">Secondary</Button>
        <Button variant="outline">Outline</Button>
        <Button variant="ghost">Ghost</Button>
        <Button variant="link">Link</Button>
        <Button variant="destructive">Delete</Button>
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <Button size="sm">Small</Button>
        <Button size="md">Medium</Button>
        <Button size="lg">
          Large
          <ArrowRightIcon aria-hidden />
        </Button>
        <Button size="icon" aria-label="Continue">
          <ArrowRightIcon aria-hidden />
        </Button>
      </div>

      <div className="flex flex-wrap items-center gap-3">
        <Button loading>Saving</Button>
        <Button disabled>Disabled</Button>
        {/* Links are styled with buttonVariants, never through `render`. */}
        <a href="#demo" className={buttonVariants({ variant: "outline" })}>
          A real link
        </a>
      </div>
    </div>
  )
}
```

## Props

### ButtonProps

Extends BaseButtonProps, ButtonVariantProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `loading` | `boolean` | `false` | Shows a spinner, sets `aria-busy`, and stops the button from being activated. |
| `loadingLabel` | `string` | `"Loading"` | Status text for screen readers, announced with the spinner. |