# Link

## Href
<sonic-code>
  <template>
    <sonic-link href="/">Basic link with href attibute</sonic-link>
  </template>
</sonic-code>

## Target
<sonic-code>
  <template>
    <sonic-link href="/" target="_blank">Link with target attibute</sonic-link>
  </template>
</sonic-code>

## AutoActive

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

### AutoActive Strict vs partial

<sonic-code>
  <template>
    <div class="grid gap-3">
      <sonic-link href="/#core" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
      <sonic-link href="/#core/components/ui/link/link.md/link" autoActive="strict" class="[&[active]]:text-success">autoActive strict</sonic-link>
    </div>
  </template>
</sonic-code>

### AutoActive disabled

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