# Button

> A versatile button component with multiple variants, sizes, and states.

- Tier: free, MIT
- Category: Actions
- Docs: https://ui.mlola.com/docs/components/button

## Install

```bash
npx mlola-ui add button
```

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

## Props with fixed values

| Component | Prop | Values | Default |
| --- | --- | --- | --- |
| Button | `size` | `sm`, `md`, `lg`, `icon` | `md` |
| Button | `variant` | `primary`, `secondary`, `subtle`, `danger`, `outline`, `link` | `primary` |
| Button | `width` | `auto`, `full` | `auto` |

## Example

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

export default function Example() {
  return (
    <div className="ml-cluster">
      <Button>Save changes</Button>
      <Button variant="secondary">Cancel</Button>
      <Button variant="danger" size="sm">Delete</Button>
    </div>
  );
}
```

## The same markup without React

```html
<div class="ml-cluster">
  <button class="ml-button" type="button" data-variant="primary" data-size="md"><span class="ml-button-label">Save changes</span></button>
  <button class="ml-button" type="button" data-variant="secondary" data-size="md"><span class="ml-button-label">Cancel</span></button>
  <button class="ml-button" type="button" data-variant="danger" data-size="sm"><span class="ml-button-label">Delete</span></button>
</div>
```