pswui/packages/react/src/docs/components/Button.mdx

import { Button } from "@components/Button";
import { TabProvider, TabTrigger, TabContent, TabList } from "@components/Tabs";
import { Story } from "@/components/Story";
import { LoadedCode } from "@/components/LoadedCode";

# Button
Displays a button or a component that looks like a button.

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Button>Button</Button>
        </Story>
    </TabContent>
    <TabContent name="code">
        ```tsx
        import { Button } from "@components/Button";

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

## Installation

1. Create a new file `Button.tsx` in your component folder.
2. Copy and paste the following code into the file.

<LoadedCode from="https://raw.githubusercontent.com/p-sw/ui/main/packages/react/components/Button.tsx" />

## Usage

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

```html
<Button>Button</Button>
```

## Props

### Variants

| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `size` | `"link" \| "sm" \| "md" \| "lg" \| "icon"` | `"md"` | The size of the button |
| `border` | `"none" \| "solid" \| "success" \| "warning" \| "danger"` | `"solid"` | The border color of the button |
| `background` | `"default" \| "ghost" \| "success" \| "warning" \| "danger" \| "transparent"` | `"default"` | The background color of the button |
| `decoration` | `"none" \| "link"` | `"none"` | The inner text decoration of the button |
| `presets` | `"default" \| "ghost" \| "link" \| "success" \| "warning" \| "danger"` | `"default"` | The preset of the variant props |

### Special

| Prop | Type | Default | Description |
| :--- | :--- | :------ | :---------- |
| `asChild` | `boolean` | `false` | Whether the button is rendered as a child of a component |

## Examples

### Default

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Button>Button</Button>
        </Story>
    </TabContent>
    <TabContent name="code">
```tsx
import { Button } from "@components/Button";

export function ButtonDemo() {
    return <Button preset="default">Button</Button>
}
```
    </TabContent>
</TabProvider>

### Ghost

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Button preset="ghost">Button</Button>
        </Story>
    </TabContent>
    <TabContent name="code">
```tsx
import { Button } from "@components/Button";

export function ButtonDemo() {
    return <Button preset="ghost">Button</Button>
}
```
    </TabContent>
</TabProvider>

### Link

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Button preset="link">Button</Button>
        </Story>
    </TabContent>
    <TabContent name="code">
```tsx
import { Button } from "@components/Button";

export function ButtonDemo() {
    return <Button preset="link">Button</Button>
}
```
    </TabContent>
</TabProvider>

### Success

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Button preset="success">Button</Button>
        </Story>
    </TabContent>
    <TabContent name="code">
```tsx
import { Button } from "@components/Button";

export function ButtonDemo() {
    return <Button preset="success">Button</Button>
}
```
    </TabContent>
</TabProvider>

### Warning

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Button preset="warning">Button</Button>
        </Story>
    </TabContent>
    <TabContent name="code">
```tsx
import { Button } from "@components/Button";

export function ButtonDemo() {
    return <Button preset="warning">Button</Button>
}
```
    </TabContent>
</TabProvider>

### Danger

<TabProvider defaultName="preview">
    <TabList>
        <TabTrigger name="preview">Preview</TabTrigger>
        <TabTrigger name="code">Code</TabTrigger>
    </TabList>
    <TabContent name="preview">
        <Story layout="centered">
            <Button preset="danger">Button</Button>
        </Story>
    </TabContent>
    <TabContent name="code">
```tsx
import { Button } from "@components/Button";

export function ButtonDemo() {
    return <Button preset="danger">Button</Button>
}
```
    </TabContent>
</TabProvider>