---
sidebar_position: 2
---

import { Button } from "rizzui";
import { ArrowRightIcon } from "@heroicons/react/24/outline";
import Paper from "@site/src/components/paper";

# Button

Primary action button to trigger an operation.

```tsx
import { Button } from "rizzui";
```

<div className="mb-20 md:mb-28" />

## Default

The default style of **Button** component.

<Paper>
  <Button>Button</Button>
</Paper>

```tsx
import { Button } from "rizzui";

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

<div className="mb-16" />

## Variants

You can change the style of the **Button** using [**variant**](#button-variants) property.

<Paper>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap">
    <Button variant="text">Button</Button>
    <Button variant="outline">Button</Button>
    <Button variant="flat">Button</Button>
    <Button variant="solid">Button</Button>
  </div>
</Paper>

```tsx
import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Button variant="text">Button</Button>
      <Button variant="outline">Button</Button>
      <Button variant="flat">Button</Button>
      <Button variant="solid">Button</Button>
    </>
  );
}
```

<div className="mb-16" />

## Sizes

You can change the size of the **Button** using [**size**](#button-sizes) property.

<Paper>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap">
    <Button size="sm">Button</Button>
    <Button>Button</Button>
    <Button size="lg">Button</Button>
    <Button size="xl">Button</Button>
  </div>
</Paper>

```tsx
import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Button size="sm">Button</Button>
      <Button>Button</Button>
      <Button size="lg">Button</Button>
      <Button size="xl">Button</Button>
    </>
  );
}
```

<div className="mb-16" />

## Rounded

You can change the border radius of the **Button** using [**rounded**](#button-rounded) property.

<Paper>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap">
    <Button rounded="none">Button</Button>
    <Button rounded="sm">Button</Button>
    <Button>Button</Button>
    <Button rounded="lg">Button</Button>
    <Button rounded="pill">Button</Button>
  </div>
</Paper>

```tsx
import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Button rounded="none">Button</Button>
      <Button rounded="sm">Button</Button>
      <Button>Button</Button>
      <Button rounded="lg">Button</Button>
      <Button rounded="pill">Button</Button>
    </>
  );
}
```

<div className="mb-16" />

## Colors

You can change the color of the **Button** using [**color**](#button-colors) property.

<Paper>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap mb-10">
    <Button>Primary</Button>
    <Button color="secondary">Secondary</Button>
    <Button color="danger">Danger</Button>
  </div>
</Paper>

```tsx
import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Button>Primary</Button>
      <Button color="secondary">Secondary</Button>
      <Button color="danger">Danger</Button>
    </>
  );
}
```

<div className="mb-16" />

## Loading

You can set the loading state of the **Button** component using **isLoading** property.

<Paper>
  <div className="flex items-center justify-around gap-4 w-full flex-wrap">
    <Button isLoading={true}>Primary</Button>
    <Button
      isLoading={true}
      color="secondary"
    >
      Secondary
    </Button>
    <Button
      isLoading={true}
      color="danger"
    >
      Danger
    </Button>
  </div>
</Paper>

```tsx
import { Button } from "rizzui";

export default function App() {
  return (
    <>
      <Button isLoading={true}>Primary</Button>
      <Button
        isLoading={true}
        color="secondary"
      >
        Secondary
      </Button>
      <Button
        isLoading={true}
        color="danger"
      >
        Danger
      </Button>
    </>
  );
}
```

<div className="mb-16" />

## Disabled

This is the disabled style of the **Button** component.

<Paper>
  <Button disabled={true}>Disabled</Button>
</Paper>

```tsx
import { Button } from "rizzui";

export default function App() {
  return <Button disabled={true}>Disabled</Button>;
}
```

<div className="mb-16" />

## With Icon

You can set any Icon at any possition.

<Paper>
  <Button>
    <span>View Details</span>{" "}
    <ArrowRightIcon
      strokeWidth="2"
      className="h-4 w-4 ml-2"
    />
  </Button>
</Paper>

```tsx
import { Button } from "rizzui";
import { ArrowRightIcon } from "@heroicons/react/24/outline";

export default function App() {
  return (
    <Button>
      <span>View Details</span>{" "}
      <ArrowRightIcon
        strokeWidth="2"
        className="h-4 w-4 ml-2"
      />
    </Button>
  );
}
```

<div className="mb-20" />

## API Reference

<hr />

<div className="mb-10" />

### Button Props

Here is the API documentation of the Button component. And the rest of the props are the same as the original html button. You can use props like **id**, **title**, **onClick**, **onFocus**, **onBlur** etc.

<div className="overflow-x-auto">

|   Props   |                    Type                    |                                       Description                                       |   Default   |
| :-------: | :----------------------------------------: | :-------------------------------------------------------------------------------------: | :---------: |
|    as     |             `button` or `span`             |                                        Render as                                        | `"button"`  |
| children  |             `React.ReactNode`              |                           Accepts everything React can render                           |    \_\_     |
|   type    |        [ButtonTypes](#button-types)        |                          Set the original HTML type of button                           | `"button"`  |
|  variant  |     [ButtonVariants](#button-variants)     |                                 Set the button variants                                 |  `"solid"`  |
|   size    |        [ButtonSizes](#button-sizes)        | Set the size of the component. <br /> `"sm"` is equivalent to the dense button styling. |   `"md"`    |
|  rounded  |      [ButtonRounded](#button-rounded)      |                        Set border radius of the button component                        |   `"md"`    |
|   color   |       [ButtonColors](#button-colors)       |                                   Change button color                                   | `"primary"` |
| isLoading |                 `boolean`                  |                            Set the loading status of button                             |    \_\_     |
| disabled  |                 `boolean`                  |                              Disabled state of the button                               |    \_\_     |
| className |                  `string`                  |                           Add custom classes for extra style                            |    \_\_     |
|    ref    |          `Ref<HTMLButtonElement>`          |                                       forwardRef                                        |    \_\_     |
|    ...    | `ButtonHTMLAttributes` or `HTMLAttributes` |              native props like **onClick**, **title**, **aria-label** ...               |    \_\_     |

</div>

<div className="mb-10" />

### Button Types

```ts
type ButtonTypes = "button" | "submit" | "reset";
```

<div className="mb-10" />

### Button Variants

```ts
type ButtonVariants = "solid" | "flat" | "outline" | "text";
```

<div className="mb-10" />

### Button Sizes

```ts
type ButtonSizes = "sm" | "md" | "lg" | "xl";
```

<div className="mb-10" />

### Button Rounded

```ts
type ButtonRounded = "sm" | "md" | "lg" | "none" | "pill";
```

<div className="mb-10" />

### Button Colors

```ts
type ButtonColors = "primary" | "secondary" | "danger";
```
