# Button
> A button with gradient variants built on Base UI
URL: https://prototyper-ui.com/docs/components/button
Base UI reference: https://base-ui.com/react/components/button
```tsx
import { Button } from "@/components/ui/button"

export default function ButtonDemo() {
  return <Button>Button</Button>
}
```

## Installation

```bash
pnpm dlx shadcn@latest add https://prototyper-ui.com/r/button.json
```

This will add the following files to your project:

- `components/ui/button.tsx`

## Usage

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

<Button>Click me</Button>
```

## Examples

### Destructive
```tsx
import { Button } from "@/components/ui/button"

export default function ButtonDestructive() {
  return <Button variant="destructive">Destructive</Button>
}
```

### Outline
```tsx
import { Button } from "@/components/ui/button"

export default function ButtonOutline() {
  return <Button variant="outline">Outline</Button>
}
```

### Secondary
```tsx
import { Button } from "@/components/ui/button"

export default function ButtonSecondary() {
  return <Button variant="secondary">Secondary</Button>
}
```

### Ghost
```tsx
import { Button } from "@/components/ui/button"

export default function ButtonGhost() {
  return <Button variant="ghost">Ghost</Button>
}
```

### Link
```tsx
import { buttonVariants } from "@/components/ui/button"

export default function ButtonLink() {
  return <a className={buttonVariants({ variant: "link" })}>Link</a>
}
```

### Icon
```tsx
import { ChevronRight } from "lucide-react"

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

export default function ButtonIcon() {
  return (
    <Button variant="outline" size="icon" aria-label="Next">
      <ChevronRight className="size-4" />
    </Button>
  )
}
```

### With Icon
```tsx
import { Mail } from "lucide-react"

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

export default function ButtonWithIcon() {
  return (
    <Button>
      <Mail className="mr-2 size-4" /> Login with Email
    </Button>
  )
}
```

### Loading
```tsx
import { Loader2 } from "lucide-react"

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

export default function ButtonLoading() {
  return (
    <Button disabled>
      <Loader2 className="mr-2 size-4 animate-spin" />
      Please wait
    </Button>
  )
}
```

### Press
```tsx
import { Button } from "@/components/ui/button"

export default function ButtonPress() {
  return <Button onClick={() => alert("You pressed me")}>Button</Button>
}
```

## Styling

### Data Slots

Use `data-slot` attributes to target the button in CSS:

| Slot name | Element             |
| --------- | ------------------- |
| `button`  | The `<button>` root |

### Customization Examples

```css
/* Make all buttons pill-shaped */
[data-slot="button"] {
  @apply rounded-full;
}
```

```tsx
{/* Use className for one-off overrides */}
<Button className="rounded-full px-8">Pill Button</Button>
```

## API Reference

### Button

A clickable button element with gradient variants.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"` | `"default"` | Visual style variant |
| `size` | `"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"` | `"default"` | Size of the button |
| `isPending` | `boolean` | - | Shows pending state and sets aria-disabled |
| `className` | `string` | - | Additional CSS classes |
| `children` | `React.ReactNode` | - | Button content |

All [Base UI Button props](https://base-ui.com/react/components/button) are forwarded via `...props`.

### buttonVariants

A `cva` helper exported for use outside of the `<Button>` component (e.g., applying button styles to links).

```tsx
import { buttonVariants } from "@/components/ui/button"

<a className={buttonVariants({ variant: "outline" })}>Link styled as button</a>
```

## Accessibility

### Keyboard Interactions

| Key     | Action                                |
| ------- | ------------------------------------- |
| `Space` | Activates the button                  |
| `Enter` | Activates the button                  |
| `Tab`   | Moves focus to / away from the button |

### ARIA Attributes

- Renders as a native `<button>` element by default via Base UI.
- `aria-disabled="true"` is set when `isPending` is `true`.
- `data-pending` attribute is set during the pending state for styling.

## Full Component Source

```tsx
"use client"

import { Button as ButtonPrimitive } from "@base-ui/react/button"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  [
    "inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium",
    "transition-[color,background-color,border-color,box-shadow,opacity] duration-150 ease-smooth",
    "motion-reduce:transition-none",
    "motion-safe:active:scale-[0.97]",
    "disabled:status-disabled",
    "focus-visible:focus-ring",
    "[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
    "shrink-0 group/button select-none no-highlight",
  ],
  {
    variants: {
      variant: {
        default: [
          // Base styles
          "relative rounded-lg overflow-visible shadow-lg border border-primary dark:border-primary-dark",
          "isolate text-primary-foreground [text-shadow:_0_1px_2px_rgb(0_0_0_/_30%)]",
          "[&>*]:relative [&>*]:z-[2]",
          // Combined gradient layer with primary colors
          "before:pointer-events-none before:absolute before:inset-[-0.5px] before:rounded-[inherit]",
          "before:bg-gradient-to-br before:from-primary-light before:via-primary-middle before:to-primary-dark",
          "before:dark:from-primary-light before:dark:via-primary-middle before:dark:to-primary-dark",
          "before:z-[-1]",
          // Additional outer border
          "after:pointer-events-none after:absolute after:inset-[0.5px] after:rounded-[inherit]",
          "after:bg-gradient-to-br after:from-primary after:to-primary-dark",
          "after:z-[-1] after:transition-opacity after:duration-200 after:opacity-40",
          // Hover state
          "hover-only:after:opacity-100 hover-only:transition-opacity hover-only:duration-200",
        ].join(" "),
        destructive:
          "bg-destructive text-destructive-foreground hover-only:bg-destructive/90",
        outline: [
          // Base styles
          "relative rounded-lg overflow-visible shadow-sm border",
          "isolate text-foreground",
          "[&>*]:relative [&>*]:z-[2]",
          // Background layer
          "before:pointer-events-none before:absolute before:inset-[-0.5px] before:rounded-[inherit]",
          "before:bg-gradient-to-br before:from-border-light before:via-border before:to-border-dark/50",
          "before:dark:from-border-light before:dark:to-border-dark",
          "before:z-[-1]",
          // Inner background layer
          "after:pointer-events-none after:absolute after:inset-[0.5px] after:rounded-[inherit]",
          "after:bg-background",
          "after:z-[-1]",
          "after:transition-colors after:duration-200 after:ease-out",
          // Hover state
          "hover-only:after:bg-muted",
        ].join(" "),
        secondary:
          "bg-secondary text-secondary-foreground hover-only:bg-secondary/80",
        ghost: "hover-only:bg-accent hover-only:text-accent-foreground motion-safe:active:scale-100",
        link: "dark:text-primary-light text-primary-dark underline-offset-4 hover-only:underline motion-safe:active:scale-100",
      },
      size: {
        default: "h-9 px-4 py-1 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        xs: "h-6 gap-1 rounded-lg px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
        sm: "h-8 rounded-lg px-3 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
        lg: "h-10 rounded-lg px-8 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
        icon: "size-9",
        "icon-xs": "size-6 rounded-lg in-data-[slot=button-group]:rounded-md",
        "icon-sm": "size-8 rounded-lg in-data-[slot=button-group]:rounded-md",
        "icon-lg": "size-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

function Button({
  className,
  variant = "default",
  size = "default",
  isPending,
  nativeButton,
  render,
  ...props
}: ButtonPrimitive.Props &
  VariantProps<typeof buttonVariants> & { isPending?: boolean }) {
  return (
    <ButtonPrimitive
      data-slot="button"
      data-pending={isPending || undefined}
      aria-disabled={isPending || undefined}
      nativeButton={nativeButton ?? (render ? false : undefined)}
      render={render}
      className={cn(
        buttonVariants({ variant, size }),
        isPending && "status-pending",
        className
      )}
      {...props}
    />
  )
}

export { Button, buttonVariants }
```