dowelunreleased

Components

Icon Button

A square control whose content is an icon. The accessible name is part of the API rather than something a caller can forget.

The label is required

An icon alone never names a control, so label is a required prop and aria-label is omitted from the type. There is no way to render one of these without a name.

tsx
import { IconButton } from "dowel";

<IconButton label="Close">
  <CloseIcon />
</IconButton>

Variants and sizes

Ghost by default, because these usually sit in a toolbar where a filled control would shout. secondary gives it a surface when it needs to read as a discrete target.

tsx
<IconButton label="Menu"><MenuIcon /></IconButton>
<IconButton label="Copy" variant="secondary"><CopyIcon /></IconButton>
<IconButton label="Confirm" variant="secondary" size="sm">
  <CheckIcon />
</IconButton>
<IconButton label="Unavailable" variant="secondary" disabled>
  <CopyIcon />
</IconButton>

With a tooltip

A Tooltip is a visual label only — it is not announced. Pairing it with an IconButton is the supported combination precisely because the button already carries its own name.

tsx
<Tooltip.Root>
  <Tooltip.Trigger
    render={<IconButton label="Copy code"><CopyIcon /></IconButton>}
  />
  <Tooltip.Portal>
    <Tooltip.Positioner>
      <Tooltip.Popup>Copy code</Tooltip.Popup>
    </Tooltip.Positioner>
  </Tooltip.Portal>
</Tooltip.Root>