---
title: Button
description: A button component that can be rendered as another tag or focusable when disabled.

links:
  doc: https://base-ui.com/react/components/button
  api: https://base-ui.com/react/components/button#api-reference
---

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

export function ButtonDefault() {
  return <Button>Button</Button>;
}
```

## Installation

```bash
npx shadcn@latest add @fab-ui/button
```

**Install the following dependencies:**

```bash
npm install @base-ui/react
```

**Copy and paste the following code into your project.**

```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(
  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-4xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
  {
    variants: {
      variant: {
        default: 'bg-primary text-primary-foreground hover:bg-primary/80',
        outline:
          'border-border bg-background hover:bg-accent hover:text-accent-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        secondary:
          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
        ghost:
          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
        destructive:
          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
        link: 'text-primary underline-offset-4 hover:underline',
      },
      size: {
        default:
          'h-9 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5',
        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
        sm: 'h-8 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
        lg: 'h-10 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
        icon: 'size-9',
        'icon-xs': "size-6 [&_svg:not([class*='size-'])]:size-3",
        'icon-sm': 'size-8',
        'icon-lg': 'size-10',
      },
    },
    defaultVariants: {
      variant: 'default',
      size: 'default',
    },
  }
);

function Button({
  className,
  variant = 'default',
  size = 'default',
  ...props
}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
  return (
    <ButtonPrimitive
      data-slot='button'
      className={cn(buttonVariants({ variant, size, className }))}
      {...props}
    />
  );
}

export { Button, buttonVariants };
```

**Update the import paths to match your project setup.**

## Usage

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

```tsx
<Button variant="outline">Button</Button>
```

## Cursor

Tailwind v4 [switched](https://tailwindcss.com/docs/upgrade-guide#buttons-use-the-default-cursor) from `cursor: pointer` to `cursor: default` for the button component.

If you want to keep the `cursor: pointer` behavior, add the following code to your CSS file:

```css showLineNumbers title="globals.css"
@layer base {
  button:not(:disabled),
  [role='button']:not(:disabled) {
    cursor: pointer;
  }
}
```

## Examples

### Outline

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

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

```tsx
<Button variant="outline">Outline</Button>
```

### Secondary

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

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

```tsx
<Button variant="secondary">Secondary</Button>
```

### Ghost

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

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

```tsx
<Button variant="ghost">Ghost</Button>
```

### Link

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

export function ButtonLink() {
  return <Button variant='link'>Link</Button>;
}
```

```tsx
<Button variant="link">Link</Button>
```

### Icon

```tsx
import { Button } from '@/components/ui/button';
import { ChevronRightIcon } from 'lucide-react';

export function ButtonIcon() {
  return (
    <Button size='icon' variant='outline'>
      <ChevronRightIcon />
    </Button>
  );
}
```

```tsx
<Button size="icon" variant="outline">
  <ChevronRightIcon />
</Button>
```

### With Icon

The spacing between the icon and the text is automatically adjusted
based on the size of the button. You do not need any margin on the icon.

```tsx
import { Button } from '@/components/ui/button';
import { ArrowRightIcon } from 'lucide-react';

export function ButtonWithIcon() {
  return (
    <Button variant='outline'>
      Enter <ArrowRightIcon />
    </Button>
  );
}
```

```tsx
<Button variant="outline">
  Enter <ArrowRightIcon />
</Button>
```

## API Reference

### Button

| Prop      | Type                                                                          | Default     |
| --------- | ----------------------------------------------------------------------------- | ----------- |
| `variant` | `"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"` | `"default"` |
| `size`    | `"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`               | `"default"` |