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

### Primary Soft

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

export default function ButtonPrimarySoft() {
  return <Button variant="primary-soft">Primary Soft</Button>;
}
```

### Destructive Soft

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

export default function ButtonDestructiveSoft() {
  return <Button variant="destructive-soft">Destructive Soft</Button>;
}
```

### Success

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

export default function ButtonSuccess() {
  return <Button variant="success">Success</Button>;
}
```

### Warning

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

export default function ButtonWarning() {
  return <Button variant="warning">Warning</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" \| "primary-soft" \| "destructive-soft" \| "success" \| "warning" \| "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.

## Compose

This component is available in [`@prototyperco/compose`](/docs/compose).

## Full Component Source

```tsx
"use client";

export { Button, buttonVariants } from "@prototyperco/ui/components/button";
```