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.

Stable .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`	—	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.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Token	Tier	Resolves to
`--focus-ring-width`	component	`2px`
`--form-height-lg`	component	`48px`
`--form-height-md`	component	`40px`
`--form-height-sm`	component	`32px`
`--form-height-xs`	component	`28px`
`--icon-button-bg-hover`	component	`color-mix(in srgb, currentColor 14%, transparent)`
`--focus-ring-offset`	semantic	`2px`
`--transition-fast`	semantic	`150ms ease`
`--radius-200`	primitive	`0.5rem`