Icon Link

Deprecated 2026-08-14, folded into esa-button (migrations.json: icon-link-to-button-chrome). What it was: the atomic nav/menu link — [icon] label [iconRight affordance] — inheriting currentColor so it sat on any surface without knowing the brand, which is now what variant="chrome" means. It was the most-composed brick in app chrome, which is why the shim stays until every spoke has run /update-tokens. weight has no destination: the button takes weight from its type composite.

Deprecated .astro import EsaIconLink from '@esa/ecology/esa-icon-link.astro';

Preview

<EsaIconLink icon="trees" iconRight="chevron-down">Mitigation work</EsaIconLink>

Inherits the surface (currentColor)

The link carries no color of its own — it inherits currentColor. Drop the same markup on a dark bar or a light surface and it just works.

<!-- on a dark bar: color set by the parent -->
<div style="color:#fff;background:#13273e">
  <EsaIconLink icon="database" iconRight="chevron-down">Data management</EsaIconLink>
</div>

Sizes

<EsaIconLink icon="credit-card" size="sm">Funding</EsaIconLink>
<EsaIconLink icon="credit-card" size="md">Funding</EsaIconLink>

Link · trigger · active

Dashboard

<EsaIconLink href="/dashboard" icon="layout-dashboard">Dashboard</EsaIconLink>
<EsaIconLink icon="circle-user" iconRight="chevron-down">Angela Zhao</EsaIconLink>
<EsaIconLink icon="trending-up" active>Reporting</EsaIconLink>

API

Prop	Type	Default	Description
`href`	`string`	—	When present renders an <a>; otherwise a <button> (e.g. a dropdown trigger).
`icon`	`string`	—	Leading Lucide icon name.
`iconRight`	`string`	—	Lucide icon to the right of the label — the dropdown/disclosure affordance, e.g. "chevron-down".
`trailing`	`string`	—	DEPRECATED — renamed to `iconRight`. Still honoured; warns at build time.
`size`	`'sm' \| 'md'`	`'md'`	sm = 14px (sub-bars), md = 16px (primary bars).
`active`	`boolean`	`false`	Selected / current state (sets aria-current and semibold).
`weight`	`'regular' \| 'medium' \| 'semibold'`	—	Label weight.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	Native button type when rendered as <button>.
`tag`	`'a' \| 'button' \| 'summary'`	—	Override the element. 'summary' makes it a disclosure trigger inside <details>.

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.