Icon button

Icon-only action for toolbars and chrome (search, close, overflow). Lightweight, transparent, and inherits currentColor — the chrome-grade counterpart to esa-button's heavier iconOnly mode. label is required for accessibility.

Inherited.astroimport EsaIconButton from '@esa/ecology/esa-icon-button.astro';

Preview

<EsaIconButton variant="chrome" iconOnly icon="search" label="Search" />

Sizes

<EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="xs" />
<EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="sm" />
<EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="md" />
<EsaIconButton variant="chrome" iconOnly icon="search" label="Search" size="lg" />

On any surface (currentColor)

Transparent background and currentColor mean it reads correctly on a dark bar or a light surface; the hover tint is derived from the inherited color.

<div style="color:#fff;background:#1e5386">
  <EsaIconButton variant="chrome" iconOnly icon="search" label="Search" />
</div>

API

Prop	Type	Default	Description
`icon`	`string`	—	Lucide icon name.
`label`	`string`	—	Accessible name (aria-label + title). Required — an icon-only control needs a name.
`href`	`string`	—	When present renders an <a>; otherwise a <button>.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Square footprint on the shared form size scale.