# 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-code>
  <template>
    <sonic-link href="/">Basic link with href attribute</sonic-link>
  </template>
</sonic-code>

## Target

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

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

## Pushstate

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

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

## AutoActive

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

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

### AutoActive strict vs partial

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

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

### AutoActive disabled

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

## 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) |