Components
IconButton
Icon-only button that requires an accessible label and can render its own tooltip.
IconButton is a square, icon-only Button for compact actions in toolbars,
table rows, and tight headers. Because there is no visible text, aria-label is
required. Pass tooltip to wrap it in a Tooltip so the same intent surfaces on
hover and focus; it forwards the usual Button props like variant and
disabled.
Example
Preview
import { IconButton } from '@officina/ui';
import { Pencil } from 'lucide-react';
<IconButton
icon={<Pencil />}
aria-label="Edit"
tooltip="Edit"
variant="ghost"
onClick={handleEdit}
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| icon* | ReactNode | — | |
| isLoading | boolean | — | Show a loading spinner and disable the button while an action is in flight. |
| size | enum | md | Visual + control size. Maps to the Button `icon` / `icon-sm` sizes. |
| tooltip | ReactNode | — | Optional tooltip; falls back to `aria-label` when omitted. |
| tooltipSide | enum | top | |
| variant | "primary" | "secondary" | "outline" | "ghost" | "soft" | "danger" | "success" | null | — |