import { ButtonBasicDemo } from "../../../src/components/button-basic-demo";
import { ButtonVariantsDemo } from "../../../src/components/button-variants-demo";
import { ButtonSizesDemo } from "../../../src/components/button-sizes-demo";
import { ButtonWithIconsDemo } from "../../../src/components/button-with-icons-demo";
import { ButtonDisabledDemo } from "../../../src/components/button-disabled-demo";

## Overview

The Button component provides clickable elements with consistent styling across your application. It supports seven visual variants for different use cases, five size options including icon-specific sizes, and automatic styling for icons and disabled states.

## Import

```tsx
import { Button } from "@px-ui/core";
```

## Usage

<Preview>
  <ButtonBasicDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Button>Click me</Button>
  ```
</CodeBlock>

## Examples

### Variants

The Button component supports seven visual variants to match different contexts and hierarchies in your interface.

<Preview>
  <ButtonVariantsDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Button variant="default">Default</Button>
  <Button variant="primary">Primary</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="primary-outline">Primary Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="link">Link</Button>
  ```
</CodeBlock>

### Sizes

Buttons can be rendered in five different sizes, including specialized sizes for icon-only buttons.

<Preview>
  <ButtonSizesDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Button size="sm">Small</Button>
  <Button size="default">Default</Button>
  <Button size="lg">Large</Button>
  <Button size="icon-sm">
    <ArrowRightIcon />
  </Button>
  <Button size="icon">
    <ArrowRightIcon />
  </Button>
  ```
</CodeBlock>

### With Icons

Buttons automatically handle icon spacing and sizing when SVG icons are included as children.

<Preview>
  <ButtonWithIconsDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Button>
    <ArrowRightIcon />
    Next
  </Button>

  <Button variant="primary">
    <SendIcon />
    Send Email
  </Button>

  <Button variant="outline">
    Download
    <DownloadIcon />
  </Button>
  ```
</CodeBlock>

### Disabled State

All button variants include distinct disabled state styling.

<Preview>
  <ButtonDisabledDemo />
</Preview>

<CodeBlock>
  ```tsx
  <Button disabled>Default Disabled</Button>
  <Button variant="primary" disabled>
    Primary Disabled
  </Button>
  <Button variant="destructive" disabled>
    Destructive Disabled
  </Button>
  <Button variant="outline" disabled>
    Outline Disabled
  </Button>
  <Button variant="ghost" disabled>
    Ghost Disabled
  </Button>
  ```
</CodeBlock>

## API Reference

### Button

A styled button component with variant and size customization.

| Prop        | Type                                                                                             | Default     | Description                                                       |
| ----------- | ------------------------------------------------------------------------------------------------ | ----------- | ----------------------------------------------------------------- |
| `variant`   | `"default" \| "primary" \| "destructive" \| "outline" \| "primary-outline" \| "ghost" \| "link"` | `"default"` | Visual style variant of the button                                |
| `size`      | `"default" \| "sm" \| "lg" \| "icon-sm" \| "icon"`                                               | `"default"` | Size of the button. Use `icon-sm` or `icon` for icon-only buttons |
| `className` | `string`                                                                                         | -           | Additional CSS classes                                            |

**Inherited Props:** Inherits all props from native HTML `button` element including `onClick`, `disabled`, `type`, etc.