---
url: https://docs.tailor.tech/app-shell/components/button.md
description: Styled button with multiple variants and sizes
---

# Button

The `Button` component is a styled button with multiple visual variants and sizes. It supports rendering as a custom element via the `render` prop (Base UI render pattern).

## Import

```tsx
import { Button } from "@tailor-platform/app-shell";
```

## Basic Usage

```tsx
function BasicUsage() {
  return (
    <div className="flex gap-2">
      <Button>Click me</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="destructive">Delete</Button>
    </div>
  );
}
```

## Props

*Generated from the type surface — first-party props only.*

### ButtonProps

| Prop       | Type                                                                                  | Default     | Description                                       |
| ---------- | ------------------------------------------------------------------------------------- | ----------- | ------------------------------------------------- |
| `render?`  | `React.ReactElement`                                                                  | -           | Custom element to render as (Base UI render prop) |
| `size?`    | `"default" \| "sm" \| "lg" \| "xs" \| "icon" \| null`                                 | `"default"` | Button size                                       |
| `variant?` | `"link" \| "default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| null` | `"default"` | Visual style variant                              |

## Exports

* `Button` — function
* `ButtonProps` — type
* `buttonVariants` — const

All standard HTML `<button>` props are also accepted.

## Variants

```tsx
function Variants() {
  return (
    <div className="flex flex-wrap gap-2">
      <Button variant="default">Primary Action</Button>
      <Button variant="destructive">Delete</Button>
      <Button variant="outline">Secondary Action</Button>
      <Button variant="secondary">Tertiary</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="link">Link Style</Button>
    </div>
  );
}
```

## Sizes

```tsx
function Sizes() {
  return (
    <div className="flex items-center gap-2">
      <Button size="xs">Extra Small</Button>
      <Button size="sm">Small</Button>
      <Button size="default">Default</Button>
      <Button size="lg">Large</Button>
      <Button size="icon">
        <PlusIcon />
      </Button>
    </div>
  );
}
```

## Render Prop

The `render` prop lets you use the button's styles on a custom element:

```tsx
import { Button } from "@tailor-platform/app-shell";
import { Link } from "@tailor-platform/app-shell";

<Button render={<Link to="/orders" />} variant="outline">
  View Orders
</Button>;
```

This is the Base UI render pattern — the button's class names and event handlers are applied to the rendered element.

## Examples

### Form Actions

```tsx
<div className="flex gap-2 justify-end">
  <Button variant="outline">Cancel</Button>
  <Button>Save Changes</Button>
</div>
```

### Destructive Confirmation

```tsx
<Button variant="destructive" onClick={handleDelete}>
  Delete Order
</Button>
```

### Icon Button

```tsx
import { PlusIcon } from "lucide-react";

<Button size="icon" variant="outline">
  <PlusIcon />
</Button>;
```

## TypeScript

```typescript
import { type ButtonProps } from "@tailor-platform/app-shell";
```

## Styling

Use `buttonVariants` to apply button styles to non-button elements:

```tsx
import { buttonVariants } from "@tailor-platform/app-shell";

<a href="/orders" className={buttonVariants({ variant: "outline", size: "sm" })}>
  View Orders
</a>;
```

## Accessibility

* Buttons render with `cursor: pointer` to signal interactivity consistently across all variants and sizes.
* Disabled buttons suppress the pointer cursor via `pointer-events-none`, so they do not signal clickability.

## Related Components

* [Dialog](dialog) - Use buttons as dialog triggers and actions
* [Sheet](sheet) - Use buttons as sheet triggers
* [Layout](layout) - Use buttons in page header actions