# Icon button

A square button that carries only an icon: row menus (⋯), edit, close, remove. Always named for assistive tech and usually paired with a tooltip.

- **Group:** Actions · **family:** `form-controls` · **shadcn:** Button
- **Build:** shadcn `Button` with `size="icon"` (+ `iconSm`).
- **In apps/admin today:** Exists as `Button size="icon"` (36px). Add `iconSm` (32px) and the ghost muted colour.
- **Client component:** no. 

## Content rules

- The label is the tooltip text too; keep it to the verb and object.

## Do

- Pair with a `Tooltip` on desktop.
- Use ghost inside tables so rows stay quiet.

## Don't

- Use an icon button for the primary action.
- Invent a glyph: use the Lucide name from the icon list.

## Motion

- Background and border on `--motion-hover`.

## Accessibility

- **Keyboard:** Enter and Space activate.
- **ARIA:** `aria-label` is mandatory and names the action plus object: "More actions for Navy birdseye two-piece suit".
- **ARIA:** A menu trigger carries `aria-haspopup="menu"` and `aria-expanded`.
- **Focus:** 2px `--ring` outline, 2px offset.

## Tokens

`--control-h-m` `--r-control` `--border` `--secondary` `--foreground` `--motion-hover` `--muted` `--muted-foreground` `--destructive`

## Files

`icon-button.html` live specimen · `icon-button.css` kit rules · `icon-button.d.ts` props · full page: `docs/components/icon-button/` (phone: `m/`).