# Icon button (goodtabs UI)

An icon only button with a required accessible label and a tooltip that shows it.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/icon-button.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/icon-button`

## Usage

```tsx
import { IconButton } from "@/components/ui/icon-button"
import { PencilIcon } from "lucide-react"

<IconButton label="Edit" variant="outline">
  <PencilIcon />
</IconButton>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` |  | Accessible name. Becomes the aria-label and the tooltip text. |
| tooltip | `boolean` | `true` | Show the label in a tooltip on hover and focus. |
| size | `Button size` | `"icon-sm"` | Any Button size. The icon sizes are icon-xs, icon-sm, icon and icon-lg. |
| variant | `Button variant` | `"default"` | Any shadcn Button variant. Ghost suits toolbars, outline suits rows. |
| children | `ReactNode` |  | The icon, usually one lucide icon. It is sized by the button. |

## When to use

- Row actions, card corners and toolbars where a text label would crowd the layout
- Any button whose icon is common enough to read on its own: close, edit, more, add
- When you want the tooltip and the accessible name to always agree

## When not to use

- For primary actions on a page: those get a text label
- For an icon whose meaning is not obvious; use a Button with text and an icon instead
- When a toggle is needed; use Toggle or aria-pressed on a plain Button

## Notes for agents

- It extends shadcn's Button, so every Button prop and variant applies; size defaults to icon-sm (28px)
- label is required and is the accessible name; never pass aria-label separately
- Each button wraps its own TooltipProvider, so it works without a provider at the root
- Pass tooltip={false} when the button sits where a tooltip would get in the way, such as in a dense list

Docs: https://ui.goodtabs.co/components/icon-button