Icon Button

Deprecated 2026-08-14, folded into esa-button (migrations.json: icon-button-to-button-chrome). What it was: an icon-only action for toolbars and chrome (search, close, overflow) — lightweight, transparent, and inheriting currentColor, which is now what variant="chrome" means. label was required for accessibility; on the button it can only be a build-time warning, since the label is a slot.

Deprecated .astro import EsaIconButton from '@esa/ecology/esa-icon-button.astro';

Preview

<EsaIconButton icon="search" label="Search" />

Sizes

<EsaIconButton icon="search" label="Search" size="xs" />
<EsaIconButton icon="search" label="Search" size="sm" />
<EsaIconButton icon="search" label="Search" size="md" />
<EsaIconButton 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 icon="search" label="Search" />
</div>

API

Prop	Type	Default	Description
`icon`	`string`	`required`	Lucide icon name.
`label`	`string`	`required`	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.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`

Any other attribute (onclick, id, name, data-*, aria-*) is forwarded verbatim to the native element, so plain-JS callers can wire a handler or grab it by id.