> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Button

> A versatile button component with multiple variants, colors, and sizes

export const IconOnlyButtons = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/ButtonIconOnly" frameBorder="0" width="100%" height="400"></iframe>;
};

export const ButtonWithIcons = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/ButtonWithIcons" frameBorder="0" width="100%" height="400"></iframe>;
};

export const ButtonSizes = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/ButtonSizes" frameBorder="0" width="100%" height="400"></iframe>;
};

export const PlainVariants = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/ButtonPlain" frameBorder="0" width="100%" height="400"></iframe>;
};

export const BorderVariants = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/ButtonBorder" frameBorder="0" width="100%" height="400"></iframe>;
};

export const FilledVariants = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/ButtonVariants" frameBorder="0" width="100%" height="400"></iframe>;
};

export const BasicButtonExample = () => {
  return <iframe src="https://kerny-custom.vercel.app/preview/ButtonDefault" frameborder="0" width="100%" height="400"></iframe>;
};

## Overview

The Button component is a flexible, accessible button with support for multiple variants, colors, sizes, and icons.

## Basic Usage

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    import { Button } from '@peppermint-design/devreadykit-custom';

    export default function App() {
      return (
        <Button onClick={() => console.log('Clicked!')}>
          Click me
        </Button>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <BasicButtonExample />
  </Tab>
</Tabs>

## Variants

### Filled (Default)

The default filled variant with solid background.

<Tabs>
  <Tab title="Code">
    ```tsx ButtonVariants theme={null}
    import { Button } from '@peppermint-design/devreadykit-custom';

    export default function ButtonVariants() {
      return (
        <div className="flex gap-4 flex-wrap">
          <Button variant="filled" color="primary">
            Primary
          </Button>
          <Button variant="filled" color="secondary">
            Secondary
          </Button>
          <Button variant="filled" color="success">
            Success
          </Button>
          <Button variant="filled" color="warning">
            Warning
          </Button>
          <Button variant="filled" color="error">
            Error
          </Button>
        </div>
      );
    }
    ```
  </Tab>

  <Tab title="Preview">
    <FilledVariants />
  </Tab>
</Tabs>

### Border

Button with border and transparent background.

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    <Button variant="border" color="primary">
      Primary Border
    </Button>
    <Button variant="border" color="secondary">
      Secondary Border
    </Button>
    ```
  </Tab>

  <Tab title="Preview">
    <BorderVariants />
  </Tab>
</Tabs>

### Plain

Minimal button with no background or border.

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    <Button variant="plain" color="primary">
      Plain Primary
    </Button>
    <Button variant="plain" color="secondary">
      Plain Secondary
    </Button>
    ```
  </Tab>

  <Tab title="Preview">
    <PlainVariants />
  </Tab>
</Tabs>

## Sizes

Buttons come in three sizes: small (s), medium (m), and large (l).

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
    <Button size="s">Small Button</Button>
    <Button size="m">Medium Button</Button>
    <Button size="l">Large Button</Button>
    ```
  </Tab>

  <Tab title="Preview">
    <ButtonSizes />
  </Tab>
</Tabs>

## With Icons

Add icons to your buttons using the `icon` prop.

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
        import { Circle } from "@/assets/icons/circle.tsx"

        <Button icon={<Circle />}>
            Button
        </Button>

    ```
  </Tab>

  <Tab title="Preview">
    <ButtonWithIcons />
  </Tab>
</Tabs>

### Icon Only Buttons

Create icon-only buttons by omitting the children.

<Tabs>
  <Tab title="Code">
    ```tsx theme={null}
        import { Eye } from "@/assets/icons/eye.tsx";
        import { EyeHide } from "@/assets/icons/eye-hide.tsx";

        <Button icon={<Eye />} />
        <Button icon={<EyeHide />} variant="border" color="secondary" />
    ```
  </Tab>

  <Tab title="Preview">
    <IconOnlyButtons />
  </Tab>
</Tabs>

## Props

| Prop      | Type                                                            | Default     | Description            |
| :-------- | :-------------------------------------------------------------- | :---------- | :--------------------- |
| variant   | `"filled" \| "border" \| "plain"`                               | `"filled"`  | Visual style variant   |
| color     | `"primary" \| "secondary" \| "error" \| "success" \| "warning"` | `"primary"` | Color theme            |
| size      | `"s" \| "m" \| "l"`                                             | `"m"`       | Button size            |
| state     | `"rest" \| "hover" \| "pressed" \| "focus" \| "disabled"`       | `"rest"`    | Button state           |
| icon      | `React.ReactElement<React.SVGProps<SVGSVGElement>>`             | —           | Icon element           |
| selected  | `boolean`                                                       | `false`     | Selected state         |
| disabled  | `boolean`                                                       | `false`     | Disabled state         |
| className | `string`                                                        | `""`        | Additional CSS classes |