Concorde UI component — Link. Links navigate with inherited typography: internal routes, anchors, or external URLs. The default slot is the anchor label. For in-app routing, pair href with pushstate; use autoActive to reflect the Doc ID: core/components/ui/link/link. Keywords: Concorde, supersoniks, core/components/ui/link/link, link, Link, UI component, sonic-link, web component, href, pushstate, autoActive, active, target="_blank", rel="noopener noreferrer", partial. URL: https://concorde.supersoniks.org/core/components/ui/link.

Link

Links navigate with inherited typography: internal routes, anchors, or external URLs. The default slot is the anchor label. For in-app routing, pair href with pushstate; use autoActive to reflect the current URL on the host (active).

Basic example

<sonic-link href="/">Basic link with href attribute</sonic-link>

Target

target="_blank" opens a new browsing context and sets rel="noopener noreferrer".

<sonic-link href="/" target="_blank">Link with target attribute</sonic-link>

Pushstate

Set pushstate on same-origin href values to intercept clicks and navigate through Concorde’s client router without a full reload.

<sonic-link href="/core/components/ui/link" pushstate>Client navigation (pushstate)</sonic-link>

AutoActive

Default autoActive is partial: the host gets active when the current URL starts with href. Style with [&[active]]: utilities or host selectors.

<sonic-link href="/core/components" class="[&[active]]:text-success">autoActive partial (default)</sonic-link>

AutoActive strict vs partial

strict requires pathname, search, and hash to match. strict-path-only matches pathname and hash but ignores search.

<div class="grid gap-3">
      <sonic-link href="/core/components/ui/link" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
      <sonic-link href="/core/components/ui/button" autoActive="strict" class="[&[active]]:text-success">autoActive strict (other page)</sonic-link>
      <sonic-link href="/core/components" autoActive="strict-path-only" class="[&[active]]:text-success">autoActive strict-path-only</sonic-link>
    </div>

AutoActive disabled

<sonic-link href="/core/components/ui/link" autoActive="disabled" class="[&[active]]:text-success">autoActive disabled</sonic-link>

Accessibility

The inner <a> uses focus-visible outline styling. Set data-aria-label when the slot text is not sufficient on its own.

API reference

Attribute	Values	Description
`href`	URL	Link target; without `href`, only the slot is rendered (no `<a>`)
`target`	e.g. `_blank`	Navigation target; `_blank` adds `rel="noopener noreferrer"`
`pushstate`	boolean	Intercepts click for Concorde client navigation without reload
`autoActive`	`partial` (default) · `strict` · `strict-path-only` · `disabled`	When the host gets the `active` attribute (same-origin `href` only)
`data-aria-label`	string	Accessible `aria-label` when the slot text is not enough

Slot	Description
(default)	Link content (text, icons)