!Draft Link

Inline and standalone link component with token-driven states.

Status: Draft Proposal

Preview

Default link Hover state Active state Visited state Disabled link

With Icon

Link with leading icon Link with trailing icon

Token Map

Token	Value
`--link-text-color-default`	`var(--color-text-brand)`
`--link-text-color-hover`	`var(--color-text-brand)`
`--link-text-color-active`	`var(--color-text-brand)`
`--link-text-color-visited`	`var(--brand-color-primary-dark)`
`--link-text-color-disabled`	`var(--color-text-disabled)`
`--link-text-decoration-default`	`underline`
`--link-text-decoration-hover`	`none`
`--link-gap`	`var(--size-spacing-100)`

Usage

<a href="/page" class="link">Go to page</a>

<a href="/page" class="link">
  <span class="icon" style="--icon-src: url('/assets/icons/login.svg')" aria-hidden="true"></span>
  With icon
</a>

<a class="link" aria-disabled="true">Disabled</a>

{% import "macros/ui.njk" as ui %}

{{ ui.link("Go to page", href="/page") }}
{{ ui.link("With icon", startIcon="login") }}
{{ ui.link("Disabled", disabled=true) }}

Open Questions

Should visited state be brand-scoped or use a dedicated semantic token?
Should there be a link--subtle variant with muted color?

Full Proposal

See docs/proposals/link-component.md for the complete implementation plan.