# Buttons & Actions

> Interactive button components and action triggers.

*Canonical: https://makerkit.dev/docs/tanstack-drizzle/ui-components/buttons-and-actions*

---

Button components for user interactions with multiple variants, sizes, and loading states.

## Button

Primary button component with variants and sizes.

```typescript
import { Button } from '@kit/ui/button';
```

### Variants

```tsx
<Button variant="default">Default</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>
```

### Sizes

```tsx
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
```

### Icon Buttons

```tsx
import { Plus, Settings, Menu } from 'lucide-react';

{/* Standard icon button (36x36px) */}
<Button size="icon">
  <Plus className="h-4 w-4" />
</Button>

{/* Small icon button (32x32px) */}
<Button size="icon-sm">
  <Settings className="h-4 w-4" />
</Button>

{/* Extra small icon button (24x24px) */}
<Button size="icon-xs">
  <Plus className="h-3 w-3" />
</Button>

{/* Large icon button (40x40px) */}
<Button size="icon-lg">
  <Menu className="h-5 w-5" />
</Button>
```

**Icon Button Sizes:**

| Size | Dimensions | Use Case |
|------|------------|----------|
| `icon-xs` | 24x24px (size-6) | Compact UI, inline actions |
| `icon-sm` | 32x32px (size-8) | Secondary actions |
| `icon` | 36x36px (size-9) | Default icon buttons |
| `icon-lg` | 40x40px (size-10) | Prominent actions, headers |

### Loading State

```tsx
import { Spinner } from '@kit/ui/spinner';

<Button disabled={isPending}>
  {isPending ? (
    <>
      <Spinner className="mr-2 h-4 w-4" />
      Loading...
    </>
  ) : (
    'Submit'
  )}
</Button>
```

### As Link

Uses the `render` prop pattern from Base UI with the TanStack Router `Link` (pass the destination via `to`):

```tsx
import { Link } from '@tanstack/react-router';

<Button render={<Link to="/dashboard" />}>
  Go to Dashboard
</Button>
```

## Button Group

Group related buttons together.

```typescript
import { ButtonGroup } from '@kit/ui/button-group';
```

```tsx
<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Center</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>
```

### Vertical Orientation

```tsx
<ButtonGroup orientation="vertical">
  <Button variant="outline">Top</Button>
  <Button variant="outline">Middle</Button>
  <Button variant="outline">Bottom</Button>
</ButtonGroup>
```

## Card Button

Clickable card component for selection interfaces.

```typescript
import { CardButton, CardButtonHeader, CardButtonTitle, CardButtonContent, CardButtonFooter } from '@kit/ui/card-button';
```

```tsx
<CardButton onClick={handleClick}>
  <CardButtonHeader>
    <CardButtonTitle>Option Title</CardButtonTitle>
  </CardButtonHeader>
  <CardButtonContent>
    <span className="text-muted-foreground text-sm">
      Description of this option
    </span>
  </CardButtonContent>
</CardButton>
```

### Without Arrow

```tsx
<CardButton>
  <CardButtonHeader displayArrow={false}>
    <CardButtonTitle>Simple Card</CardButtonTitle>
  </CardButtonHeader>
  <CardButtonContent>
    Content without arrow indicator
  </CardButtonContent>
</CardButton>
```

## Copy to Clipboard

Button that copies text to clipboard with toast feedback.

```typescript
import { CopyToClipboard } from '@kit/ui/copy-to-clipboard';
```

```tsx
<CopyToClipboard value="text-to-copy">
  Copy this text
</CopyToClipboard>

{/* Custom messages */}
<CopyToClipboard
  value={apiKey}
  successMessage="API key copied!"
  errorMessage="Failed to copy API key"
>
  {apiKey}
</CopyToClipboard>
```

Shows a copy icon that changes to a checkmark on success, with toast notification.

---

**Next:** [Layout & Structure →](./layout-and-structure)