# Button

Clickable action with variants, sizes and asChild.

- Category: Buttons
- Interactive docs: https://aicronus.com/components/button

## Install

```bash
npx cronus-ui add button
```

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

Package dependencies: `@radix-ui/react-slot@^1.2.3`, `class-variance-authority@^0.7.1`.

Registry dependencies (installed automatically): `cn`.

## Examples

### Variants

Six visual styles, from the primary call-to-action down to a subtle link.

```tsx
<div className="flex flex-wrap items-center gap-3">
  <Button variant="primary">Primary</Button>
  <Button variant="secondary">Secondary</Button>
  <Button variant="outline">Outline</Button>
  <Button variant="ghost">Ghost</Button>
  <Button variant="destructive">Destructive</Button>
  <Button variant="link">Link</Button>
</div>
```

### Sizes

Three text sizes plus square icon sizes for toolbar-style actions.

```tsx
<div className="flex flex-wrap items-center gap-3">
  <Button size="sm">Small</Button>
  <Button size="md">Medium</Button>
  <Button size="lg">Large</Button>
  <Button size="icon" aria-label="Settings">
    <Settings />
  </Button>
  <Button size="icon-sm" aria-label="Settings">
    <Settings />
  </Button>
</div>
```

### With icons

Icons sit inline with the label. Use a Spinner for loading state and disable to block input.

```tsx
<div className="flex flex-wrap items-center gap-3">
  <Button>
    <Download />
    Download
  </Button>
  <Button variant="secondary">
    Continue
    <ArrowRight />
  </Button>
  <Button variant="outline">
    <Heart />
    Like
  </Button>
  <Button disabled>
    <Heart />
    Disabled
  </Button>
  <Button disabled>
    <Spinner size="sm" aria-hidden="true" />
    Saving
  </Button>
</div>
```

### As link

Use `asChild` to render the button styles on another element, such as an anchor.

```tsx
<Button asChild>
  <a href="/docs">
    Read the docs
    <ArrowRight />
  </a>
</Button>
```

## API reference

Generated from the component's exported types.

### ButtonProps

Extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants>.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `asChild` | `boolean` | `false` |  |
| `variant` | `"primary" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"` | `"primary"` |  |
| `size` | `"sm" \| "md" \| "lg" \| "icon" \| "icon-sm"` | `"md"` |  |

---

Live preview: https://aicronus.com/components/button