# Button

> Primary action element with 4 variants, 3 sizes, 3 square icon sizes and a loading state. An icon goes in as a child, before or after the label. buttonVariants lives in its own file with no use client, so a server component can style a link as a button.

Section: Primitives. Docs: https://entrepta.vercel.app/docs/components/button

## Install

```bash
npx @entrepta/cli@latest add button
```

Files: `primitives/button.tsx`, `primitives/button-variants.ts`.
npm packages: `class-variance-authority`, `@phosphor-icons/react`, `@radix-ui/react-slot`.

## Usage

```tsx
import { Button } from "@/components/entrepta/button"
import { ArrowRightIcon, GearIcon, RocketLaunchIcon } from "@phosphor-icons/react"

<Button>./projects.sh →</Button>
<Button><RocketLaunchIcon aria-hidden size={14} /> deploy</Button>
<Button variant="secondary">docs <ArrowRightIcon aria-hidden size={14} /></Button>
<Button variant="ghost" size="icon-md" aria-label="Settings">
  <GearIcon aria-hidden size={16} />
</Button>
<Button variant="secondary">$ npx @entrepta/cli@latest init</Button>
<Button variant="ghost">cat contact.txt</Button>
<Button variant="command">npx @entrepta/cli@latest add button</Button>
<Button size="sm" loading>Loading…</Button>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"primary" \| "secondary" \| "ghost" \| "command"` | "primary" | Visual style variant |
| `size` | `"sm" \| "md" \| "lg" \| "icon-sm" \| "icon-md" \| "icon-lg"` | "md" | Height and padding. The icon sizes are square: name the button with aria-label |
| `loading` | `boolean` | false | Shows spinner and disables the button |
| `asChild` | `boolean` | false | Delegates rendering to child via Radix Slot |