Link

A styled anchor element with variants, underline control, and external link support.

Live Sandbox

This is a hydrated playground for the component. Toggle "Live preview" on the block below to swap the static HTML render for a real Livewire instance — every prop in the component's sandbox schema becomes an editable form field inside the iframe, so you can try different prop combinations live without writing any local code.

<x-wirekit::link href="https://docs.wirekit.app">Read the docs</x-wirekit::link>

Basic Usage

<x-wirekit::link href="#">Documentation</x-wirekit::link>

Variants

<x-wirekit::row gap="lg">
    <x-wirekit::link href="#" variant="default">Default</x-wirekit::link>
    <x-wirekit::link href="#" variant="subtle">Subtle</x-wirekit::link>
    <x-wirekit::link href="#" variant="muted">Muted</x-wirekit::link>
</x-wirekit::row>

External Links

External links automatically get target="_blank", rel="noopener noreferrer", and a small arrow icon.

<x-wirekit::link href="#" :external="true">GitHub Repository</x-wirekit::link>

When script turns the link into something else

A link that opens a new tab says so twice: external draws the arrow icon, and every target="_blank" carries a screen-reader hint, "(opens in new tab)". Some anchors only open a tab when script is off. A document link in a sign-up form can open the document in a dialog when script runs and in a new tab when it does not, so the form keeps what the reader typed either way. There the automatic hint is wrong whenever the dialog opens.

:announce-new-tab="false" drops the icon and the hint and keeps target and the forced rel="noopener noreferrer":

<x-wirekit::text>
    I have read the <x-wirekit::link href="#" target="_blank" :announce-new-tab="false">privacy policy</x-wirekit::link>.
</x-wirekit::text>

The call site then says what the reader gets. A hint that script removes is announced only when the new tab is what happens:

<x-wirekit::link
    href="{{ route('legal.privacy') }}"
    target="_blank"
    :announce-new-tab="false"
    x-on:click.prevent="$dispatch('wirekit-modal-show', { name: 'privacy' })"
    x-bind:aria-haspopup="'dialog'"
>privacy policy<span class="sr-only" x-show="false"> {{ __('wirekit::(opens in new tab)') }}</span></x-wirekit::link>

The anchor sits inside an Alpine component, which the click handler needs anyway. With script, x-show hides the hint and the bound aria-haspopup announces the dialog; without script, the hint stays and the link opens its tab.

Underline Styles

<x-wirekit::row gap="lg" wrap>
    <x-wirekit::link href="#" underline="always">Always underlined (default)</x-wirekit::link>
    <x-wirekit::link href="#" underline="hover">Underline on hover</x-wirekit::link>
    <x-wirekit::link href="#" underline="none">No underline</x-wirekit::link>
</x-wirekit::row>

In Context

<x-wirekit::text>
    Read the <x-wirekit::link href="#">getting started guide</x-wirekit::link> to learn how to install WireKit in your project.
</x-wirekit::text>

Link styled as a button

Use as="button" for an action that should look like a link but be a real <button> — accessible and keyboard-operable, without a fake href="#".

<x-wirekit::row gap="sm">
    <x-wirekit::link href="/docs">A navigation link</x-wirekit::link>
    <x-wirekit::link as="button" type="button">A link-styled action</x-wirekit::link>
</x-wirekit::row>

Props

Accessibility

External links include an inline SVG icon with aria-hidden="true" to indicate they open in a new window, and any link with target="_blank" carries the screen-reader hint "(opens in new tab)". The rel="noopener noreferrer" attribute prevents the opened page from accessing the original window; it is forced even with :announce-new-tab="false", which only drops the icon and the hint.

Keyboard Interaction

Pitfalls

• Don't add rel="noopener" manually on target="_blank" links. WireKit auto-injects rel="noopener noreferrer" for _blank (CVE-class tabnabbing fix). Manual rel values are merged correctly, but it's redundant.
• Don't use <x-wirekit::link> for purely decorative anchors. It draws the kit's focus ring and adds a screen-reader hint for _blank targets, overhead for invisible navigation. A plain <a> is fine for those.

Design Tokens

Usage & Conventions

Prop conventions — this component uses one or more of the shared semantic prop names (intent / variant / tone / surface). See Prop naming conventions for the canonical vocabulary, alias matrix, and decision tree.