Link

Experimental Alpha

This library is a work-in-progress. We are releasing it early to gather feedback, but it is not ready for production.

The Link component is a semantic, accessible wrapper around the native HTML <a> element that provides consistent styling, variants, and states while preserving native browser accessibility features.

Examples

Vue

Lit

React

Live Preview

Basic Links

Home

About

Contact

Variant Links

Primary Link

Success Link

Warning Link

Danger Link

Monochrome Link

Button-Style Links

Default Button

Primary Button

Success Button

Warning Button

Danger Button

Monochrome Button

Button Sizes

Extra Small

Small

Medium

Large

Extra Large

Button Shapes

Default

Rounded

Capsule

■

▢

Bordered Buttons

Primary Outlined

Success Outlined

Warning Outlined

Danger Outlined

Monochrome Outlined

Complex Button Combinations

Large Capsule Button

Large Capsule Outlined

Small Rounded Outlined

External Link

External Link →

External Button →

Disabled Links

Disabled Link

Disabled Button

Disabled Success Button

Accessible Icon Links

📄

⚙️

Call-to-Action Pattern

Get Started Free

Learn More

Action Bar Pattern

Edit

Duplicate

Delete

View Vue Code

<template>
  <section>
    <div class="mbe4">
      <h2>Basic Links</h2>
      <div class="stacked-mobile">
        <VueLink href="#link">Home</VueLink>
        <VueLink href="#link">About</VueLink>
        <VueLink href="#link">Contact</VueLink>
      </div>
    </div>

    <div class="mbe4">
      <h2>Variant Links</h2>
      <div class="stacked-mobile">
        <VueLink
          href="#link"
          variant="primary"
        >Primary Link</VueLink>
        <VueLink
          href="#link"
          variant="success"
        >Success Link</VueLink>
        <VueLink
          href="#link"
          variant="warning"
        >Warning Link</VueLink>
        <VueLink
          href="#link"
          variant="danger"
        >Danger Link</VueLink>
        <VueLink
          href="#link"
          variant="monochrome"
        >Monochrome Link</VueLink>
      </div>
    </div>

    <div class="mbe4">
      <h2>Button-Style Links</h2>
      <div class="stacked-mobile">
        <VueLink
          href="#link"
          :isButton="true"
        >Default Button</VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          variant="primary"
        >Primary Button</VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          variant="success"
        >Success Button</VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          variant="warning"
        >Warning Button</VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          variant="danger"
        >Danger Button</VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          variant="monochrome"
        >Monochrome Button</VueLink>
      </div>
    </div>

    <div class="mbe4">
      <h2>Button Sizes</h2>
      <div class="stacked-mobile">
        <VueLink
          href="#link"
          :isButton="true"
          buttonSize="x-sm"
          variant="primary"
        >
          Extra Small
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          buttonSize="sm"
          variant="primary"
        >
          Small
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          buttonSize="md"
          variant="primary"
        >
          Medium
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          buttonSize="lg"
          variant="primary"
        >
          Large
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          buttonSize="xl"
          variant="primary"
        >
          Extra Large
        </VueLink>
      </div>
    </div>

    <div class="mbe4">
      <h2>Button Shapes</h2>
      <div class="stacked-mobile">
        <VueLink
          href="#link"
          :isButton="true"
          variant="primary"
        >
          Default
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          buttonShape="rounded"
          variant="primary"
        >
          Rounded
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          buttonShape="capsule"
          variant="primary"
        >
          Capsule
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          buttonShape="circle"
          variant="primary"
          ariaLabel="Add"
        >
          +
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          buttonShape="square"
          variant="primary"
          ariaLabel="Menu"
        >
          ■
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          buttonShape="rounded-square"
          variant="primary"
          ariaLabel="Settings"
        >
          ▢
        </VueLink>
      </div>
    </div>

    <div class="mbe4">
      <h2>Bordered Buttons</h2>
      <div class="stacked-mobile">
        <VueLink
          href="#link"
          :isButton="true"
          :buttonBordered="true"
          variant="primary"
        >
          Primary Outlined
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          :buttonBordered="true"
          variant="success"
        >
          Success Outlined
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          :buttonBordered="true"
          variant="warning"
        >
          Warning Outlined
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          :buttonBordered="true"
          variant="danger"
        >
          Danger Outlined
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          :buttonBordered="true"
          variant="monochrome"
        >
          Monochrome Outlined
        </VueLink>
      </div>
    </div>

    <div class="mbe4">
      <h2>Complex Button Combinations</h2>
      <div class="stacked-mobile">
        <VueLink
          href="#link"
          :isButton="true"
          buttonSize="lg"
          buttonShape="capsule"
          variant="primary"
        >
          Large Capsule Button
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          buttonSize="lg"
          buttonShape="capsule"
          :buttonBordered="true"
          variant="success"
        >
          Large Capsule Outlined
        </VueLink>
        <VueLink
          href="#link"
          :isButton="true"
          buttonSize="sm"
          buttonShape="rounded"
          :buttonBordered="true"
          variant="warning"
        >
          Small Rounded Outlined
        </VueLink>
      </div>
    </div>

    <div class="mbe4">
      <h2>External Link</h2>
      <div class="stacked-mobile">
        <VueLink
          href="https://github.com"
          :external="true"
        >
          External Link →
        </VueLink>
        <VueLink
          href="https://github.com"
          :external="true"
          :isButton="true"
          variant="primary"
        >
          External Button →
        </VueLink>
      </div>
    </div>

    <div class="mbe4">
      <h2>Disabled Links</h2>
      <div class="stacked-mobile">
        <VueLink
          href="#link"
          :disabled="true"
        >
          Disabled Link
        </VueLink>
        <VueLink
          href="#link"
          :disabled="true"
          :isButton="true"
        >
          Disabled Button
        </VueLink>
        <VueLink
          href="#link"
          :disabled="true"
          :isButton="true"
          variant="success"
        >
          Disabled Success Button
        </VueLink>
      </div>
    </div>

    <div class="mbe4">
      <h2>Accessible Icon Links</h2>
      <div class="stacked-mobile">
        <VueLink
          href="#download"
          ariaLabel="Download PDF report"
        >
          📄
        </VueLink>
        <VueLink
          href="#settings"
          :isButton="true"
          buttonShape="circle"
          variant="primary"
          ariaLabel="Settings"
        >
          ⚙️
        </VueLink>
        <VueLink
          href="#add"
          :isButton="true"
          buttonShape="circle"
          variant="success"
          ariaLabel="Add new item"
        >
          +
        </VueLink>
        <VueLink
          href="#delete"
          :isButton="true"
          buttonShape="circle"
          variant="danger"
          ariaLabel="Delete"
        >
          ×
        </VueLink>
      </div>
    </div>

    <div class="mbe4">
      <h2>Call-to-Action Pattern</h2>
      <div class="stacked-mobile">
        <VueLink
          href="#signup"
          :isButton="true"
          buttonSize="lg"
          buttonShape="capsule"
          variant="primary"
        >
          Get Started Free
        </VueLink>
        <VueLink
          href="#learn-more"
          :isButton="true"
          buttonSize="lg"
          buttonShape="capsule"
          :buttonBordered="true"
          variant="primary"
        >
          Learn More
        </VueLink>
      </div>
    </div>

    <div class="mbe4">
      <h2>Action Bar Pattern</h2>
      <div class="stacked-mobile">
        <VueLink
          href="#edit"
          :isButton="true"
          buttonSize="sm"
          variant="primary"
        >
          Edit
        </VueLink>
        <VueLink
          href="#duplicate"
          :isButton="true"
          buttonSize="sm"
          :buttonBordered="true"
        >
          Duplicate
        </VueLink>
        <VueLink
          href="#delete"
          :isButton="true"
          buttonSize="sm"
          variant="danger"
        >
          Delete
        </VueLink>
      </div>
    </div>
  </section>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { VueLink } from "agnosticui-core/link/vue";

export default defineComponent({
  name: "LinkExamples",
  components: {
    VueLink,
  },
});
</script>

<style scoped>
.mbe4 {
  margin-bottom: 2rem;
}

.stacked-mobile {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

h3 {
  margin-bottom: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
}
</style>

Live Preview

View Lit / Web Component Code

import { LitElement, html } from 'lit';
import 'agnosticui-core/link';

export class LinkLitExamples extends LitElement {
  createRenderRoot() {
    return this;
  }

  render() {
    return html`
      <section>
        <div class="mbe4">
          <h2>Basic Links</h2>
          <div class="stacked-mobile">
            <ag-link href="#link">Home</ag-link>
            <ag-link href="#link">About</ag-link>
            <ag-link href="#link">Contact</ag-link>
          </div>
        </div>

        <div class="mbe4">
          <h2>Variant Links</h2>
          <div class="stacked-mobile">
            <ag-link href="#link" variant="primary">Primary Link</ag-link>
            <ag-link href="#link" variant="success">Success Link</ag-link>
            <ag-link href="#link" variant="warning">Warning Link</ag-link>
            <ag-link href="#link" variant="danger">Danger Link</ag-link>
            <ag-link href="#link" variant="monochrome">Monochrome Link</ag-link>
          </div>
        </div>

        <div class="mbe4">
          <h2>Button-Style Links</h2>
          <div class="stacked-mobile">
            <ag-link href="#link" isButton>Default Button</ag-link>
            <ag-link href="#link" isButton variant="primary">Primary Button</ag-link>
            <ag-link href="#link" isButton variant="success">Success Button</ag-link>
            <ag-link href="#link" isButton variant="warning">Warning Button</ag-link>
            <ag-link href="#link" isButton variant="danger">Danger Button</ag-link>
            <ag-link href="#link" isButton variant="monochrome">Monochrome Button</ag-link>
          </div>
        </div>

        <div class="mbe4">
          <h2>Button Sizes</h2>
          <div class="stacked-mobile">
            <ag-link href="#link" isButton buttonSize="x-sm" variant="primary">
              Extra Small
            </ag-link>
            <ag-link href="#link" isButton buttonSize="sm" variant="primary">
              Small
            </ag-link>
            <ag-link href="#link" isButton buttonSize="md" variant="primary">
              Medium
            </ag-link>
            <ag-link href="#link" isButton buttonSize="lg" variant="primary">
              Large
            </ag-link>
            <ag-link href="#link" isButton buttonSize="xl" variant="primary">
              Extra Large
            </ag-link>
          </div>
        </div>

        <div class="mbe4">
          <h2>Button Shapes</h2>
          <div class="stacked-mobile">
            <ag-link href="#link" isButton variant="primary">
              Default
            </ag-link>
            <ag-link href="#link" isButton buttonShape="rounded" variant="primary">
              Rounded
            </ag-link>
            <ag-link href="#link" isButton buttonShape="capsule" variant="primary">
              Capsule
            </ag-link>
            <ag-link href="#link" isButton buttonShape="circle" variant="primary" ariaLabel="Add">
              +
            </ag-link>
            <ag-link href="#link" isButton buttonShape="square" variant="primary" ariaLabel="Menu">
              ■
            </ag-link>
            <ag-link href="#link" isButton buttonShape="rounded-square" variant="primary" ariaLabel="Settings">
              ▢
            </ag-link>
          </div>
        </div>

        <div class="mbe4">
          <h2>Bordered Buttons</h2>
          <div class="stacked-mobile">
            <ag-link href="#link" isButton buttonBordered variant="primary">
              Primary Outlined
            </ag-link>
            <ag-link href="#link" isButton buttonBordered variant="success">
              Success Outlined
            </ag-link>
            <ag-link href="#link" isButton buttonBordered variant="warning">
              Warning Outlined
            </ag-link>
            <ag-link href="#link" isButton buttonBordered variant="danger">
              Danger Outlined
            </ag-link>
            <ag-link href="#link" isButton buttonBordered variant="monochrome">
              Monochrome Outlined
            </ag-link>
          </div>
        </div>

        <div class="mbe4">
          <h2>Complex Button Combinations</h2>
          <div class="stacked-mobile">
            <ag-link href="#link" isButton buttonSize="lg" buttonShape="capsule" variant="primary">
              Large Capsule Button
            </ag-link>
            <ag-link href="#link" isButton buttonSize="lg" buttonShape="capsule" buttonBordered variant="success">
              Large Capsule Outlined
            </ag-link>
            <ag-link href="#link" isButton buttonSize="sm" buttonShape="rounded" buttonBordered variant="warning">
              Small Rounded Outlined
            </ag-link>
          </div>
        </div>

        <div class="mbe4">
          <h2>External Link</h2>
          <div class="stacked-mobile">
            <ag-link href="https://github.com" external>
              External Link →
            </ag-link>
            <ag-link href="https://github.com" external isButton variant="primary">
              External Button →
            </ag-link>
          </div>
        </div>

        <div class="mbe4">
          <h2>Disabled Links</h2>
          <div class="stacked-mobile">
            <ag-link href="#link" disabled>
              Disabled Link
            </ag-link>
            <ag-link href="#link" disabled isButton>
              Disabled Button
            </ag-link>
            <ag-link href="#link" disabled isButton variant="success">
              Disabled Success Button
            </ag-link>
          </div>
        </div>

        <div class="mbe4">
          <h2>Accessible Icon Links</h2>
          <div class="stacked-mobile">
            <ag-link href="#download" ariaLabel="Download PDF report">
              📄
            </ag-link>
            <ag-link href="#settings" isButton buttonShape="circle" variant="primary" ariaLabel="Settings">
              ⚙️
            </ag-link>
            <ag-link href="#add" isButton buttonShape="circle" variant="success" ariaLabel="Add new item">
              +
            </ag-link>
            <ag-link href="#delete" isButton buttonShape="circle" variant="danger" ariaLabel="Delete">
              ×
            </ag-link>
          </div>
        </div>

        <div class="mbe4">
          <h2>Call-to-Action Pattern</h2>
          <div class="stacked-mobile">
            <ag-link href="#signup" isButton buttonSize="lg" buttonShape="capsule" variant="primary">
              Get Started Free
            </ag-link>
            <ag-link href="#learn-more" isButton buttonSize="lg" buttonShape="capsule" buttonBordered variant="primary">
              Learn More
            </ag-link>
          </div>
        </div>

        <div class="mbe4">
          <h2>Action Bar Pattern</h2>
          <div class="stacked-mobile">
            <ag-link href="#edit" isButton buttonSize="sm" variant="primary">
              Edit
            </ag-link>
            <ag-link href="#duplicate" isButton buttonSize="sm" buttonBordered>
              Duplicate
            </ag-link>
            <ag-link href="#delete" isButton buttonSize="sm" variant="danger">
              Delete
            </ag-link>
          </div>
        </div>
      </section>
    `;
  }
}

// Register the custom element
customElements.define('link-lit-examples', LinkLitExamples);

Interactive Preview: Click the "Open in StackBlitz" button below to see this example running live in an interactive playground.

View React Code

import { ReactLink } from "agnosticui-core/link/react";

export default function LinkReactExamples() {
  return (
    <section>
      <div className="mbe4">
        <h2>Basic Links</h2>
        <div className="stacked-mobile">
          <ReactLink href="#link">Home</ReactLink>
          <ReactLink href="#link">About</ReactLink>
          <ReactLink href="#link">Contact</ReactLink>
        </div>
      </div>

      <div className="mbe4">
        <h2>Variant Links</h2>
        <div className="stacked-mobile">
          <ReactLink href="#link" variant="primary">Primary Link</ReactLink>
          <ReactLink href="#link" variant="success">Success Link</ReactLink>
          <ReactLink href="#link" variant="warning">Warning Link</ReactLink>
          <ReactLink href="#link" variant="danger">Danger Link</ReactLink>
          <ReactLink href="#link" variant="monochrome">Monochrome Link</ReactLink>
        </div>
      </div>

      <div className="mbe4">
        <h2>Button-Style Links</h2>
        <div className="stacked-mobile">
          <ReactLink href="#link" isButton={true}>Default Button</ReactLink>
          <ReactLink href="#link" isButton={true} variant="primary">Primary Button</ReactLink>
          <ReactLink href="#link" isButton={true} variant="success">Success Button</ReactLink>
          <ReactLink href="#link" isButton={true} variant="warning">Warning Button</ReactLink>
          <ReactLink href="#link" isButton={true} variant="danger">Danger Button</ReactLink>
          <ReactLink href="#link" isButton={true} variant="monochrome">Monochrome Button</ReactLink>
        </div>
      </div>

      <div className="mbe4">
        <h2>Button Sizes</h2>
        <div className="stacked-mobile">
          <ReactLink href="#link" isButton={true} buttonSize="x-sm" variant="primary">
            Extra Small
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonSize="sm" variant="primary">
            Small
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonSize="md" variant="primary">
            Medium
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonSize="lg" variant="primary">
            Large
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonSize="xl" variant="primary">
            Extra Large
          </ReactLink>
        </div>
      </div>

      <div className="mbe4">
        <h2>Button Shapes</h2>
        <div className="stacked-mobile">
          <ReactLink href="#link" isButton={true} variant="primary">
            Default
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonShape="rounded" variant="primary">
            Rounded
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonShape="capsule" variant="primary">
            Capsule
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonShape="circle" variant="primary" ariaLabel="Add">
            +
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonShape="square" variant="primary" ariaLabel="Menu">
            ■
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonShape="rounded-square" variant="primary" ariaLabel="Settings">
            ▢
          </ReactLink>
        </div>
      </div>

      <div className="mbe4">
        <h2>Bordered Buttons</h2>
        <div className="stacked-mobile">
          <ReactLink href="#link" isButton={true} buttonBordered={true} variant="primary">
            Primary Outlined
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonBordered={true} variant="success">
            Success Outlined
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonBordered={true} variant="warning">
            Warning Outlined
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonBordered={true} variant="danger">
            Danger Outlined
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonBordered={true} variant="monochrome">
            Monochrome Outlined
          </ReactLink>
        </div>
      </div>

      <div className="mbe4">
        <h2>Complex Button Combinations</h2>
        <div className="stacked-mobile">
          <ReactLink href="#link" isButton={true} buttonSize="lg" buttonShape="capsule" variant="primary">
            Large Capsule Button
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonSize="lg" buttonShape="capsule" buttonBordered={true} variant="success">
            Large Capsule Outlined
          </ReactLink>
          <ReactLink href="#link" isButton={true} buttonSize="sm" buttonShape="rounded" buttonBordered={true} variant="warning">
            Small Rounded Outlined
          </ReactLink>
        </div>
      </div>

      <div className="mbe4">
        <h2>External Link</h2>
        <div className="stacked-mobile">
          <ReactLink href="https://github.com" external={true}>
            External Link →
          </ReactLink>
          <ReactLink href="https://github.com" external={true} isButton={true} variant="primary">
            External Button →
          </ReactLink>
        </div>
      </div>

      <div className="mbe4">
        <h2>Disabled Links</h2>
        <div className="stacked-mobile">
          <ReactLink href="#link" disabled={true}>
            Disabled Link
          </ReactLink>
          <ReactLink href="#link" disabled={true} isButton={true}>
            Disabled Button
          </ReactLink>
          <ReactLink href="#link" disabled={true} isButton={true} variant="success">
            Disabled Success Button
          </ReactLink>
        </div>
      </div>

      <div className="mbe4">
        <h2>Accessible Icon Links</h2>
        <div className="stacked-mobile">
          <ReactLink href="#download" ariaLabel="Download PDF report">
            📄
          </ReactLink>
          <ReactLink href="#settings" isButton={true} buttonShape="circle" variant="primary" ariaLabel="Settings">
            ⚙️
          </ReactLink>
          <ReactLink href="#add" isButton={true} buttonShape="circle" variant="success" ariaLabel="Add new item">
            +
          </ReactLink>
          <ReactLink href="#delete" isButton={true} buttonShape="circle" variant="danger" ariaLabel="Delete">
            ×
          </ReactLink>
        </div>
      </div>

      <div className="mbe4">
        <h2>Call-to-Action Pattern</h2>
        <div className="stacked-mobile">
          <ReactLink href="#signup" isButton={true} buttonSize="lg" buttonShape="capsule" variant="primary">
            Get Started Free
          </ReactLink>
          <ReactLink href="#learn-more" isButton={true} buttonSize="lg" buttonShape="capsule" buttonBordered={true} variant="primary">
            Learn More
          </ReactLink>
        </div>
      </div>

      <div className="mbe4">
        <h2>Action Bar Pattern</h2>
        <div className="stacked-mobile">
          <ReactLink href="#edit" isButton={true} buttonSize="sm" variant="primary">
            Edit
          </ReactLink>
          <ReactLink href="#duplicate" isButton={true} buttonSize="sm" buttonBordered={true}>
            Duplicate
          </ReactLink>
          <ReactLink href="#delete" isButton={true} buttonSize="sm" variant="danger">
            Delete
          </ReactLink>
        </div>
      </div>
    </section>
  );
}

Open in StackBlitz

Usage

TIP

The framework examples below import AgnosticUI as an npm package. Alternatively, you can use the CLI for complete control, AI/LLM visibility, and full code ownership:

bash

npx ag init --framework FRAMEWORK # react, vue, lit, svelte, etc.
npx ag add Link

The CLI copies source code directly into your project, giving you full visibility and control. After running npx ag add, you'll receive exact import instructions.

Vue

vue

<template>
  <VueLink href="/home">Go to Home</VueLink>
  <VueLink href="/success" variant="success">Success Link</VueLink>
  <VueLink href="https://example.com" external>External Link</VueLink>
  <VueLink href="/action" :isButton="true" variant="primary"
    >Button Link</VueLink
  >
  <VueLink
    href="/action"
    :isButton="true"
    buttonSize="lg"
    buttonShape="capsule"
  >
    Large Capsule Button
  </VueLink>
  <VueLink
    href="/action"
    :isButton="true"
    :buttonBordered="true"
    variant="primary"
  >
    Bordered Button
  </VueLink>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { VueLink } from "agnosticui-core/link/vue";
export default defineComponent({
  components: { VueLink },
});
</script>

React

tsx

import { ReactLink } from "agnosticui-core/link/react";
export default function Example() {
  return (
    <>
      <ReactLink href="/home">Go to Home</ReactLink>
      <ReactLink href="/success" variant="success">
        Success Link
      </ReactLink>
      <ReactLink href="https://example.com" external>
        External Link
      </ReactLink>
      <ReactLink href="/action" isButton variant="primary">
        Button Link
      </ReactLink>
      <ReactLink href="/action" isButton buttonSize="lg" buttonShape="capsule">
        Large Capsule Button
      </ReactLink>
      <ReactLink href="/action" isButton buttonBordered variant="primary">
        Bordered Button
      </ReactLink>
    </>
  );
}

Lit (Web Components)

html

<script type="module">
  import "agnosticui-core/link";
</script>
<ag-link href="/home">Go to Home</ag-link>
<ag-link href="/success" variant="success">Success Link</ag-link>
<ag-link href="https://example.com" external>External Link</ag-link>
<ag-link href="/action" isButton variant="primary">Button Link</ag-link>
<ag-link href="/action" isButton buttonSize="lg" buttonShape="capsule">
  Large Capsule Button
</ag-link>
<ag-link href="/action" isButton buttonBordered variant="primary">
  Bordered Button
</ag-link>

Props

Prop	Type	Default	Description
`href`	`string`	`''`	URL the link points to
`variant`	`'primary' \| 'success' \| 'warning' \| 'danger' \| 'monochrome' \| ''`	`''`	Visual style variant
`isButton`	`boolean`	`false`	Styles the link to look like a button
`buttonSize`	`'x-sm' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Size variant for button-style links (only applies when `isButton` is `true`)
`buttonShape`	`'capsule' \| 'rounded' \| 'circle' \| 'square' \| 'rounded-square' \| ''`	`''`	Shape variant for button-style links (only applies when `isButton` is `true`)
`buttonBordered`	`boolean`	`false`	Bordered style for button-style links (only applies when `isButton` is `true`)
`external`	`boolean`	`false`	Indicates external link (adds `rel="noopener noreferrer"` and `target="_blank"`)
`disabled`	`boolean`	`false`	Disables the link (renders as span, adds `aria-disabled="true"`)
`ariaLabel`	`string`	`''`	ARIA label for accessibility
`onClick`	`(event: MouseEvent) => void`	`undefined`	Click event handler
`onFocus`	`(event: FocusEvent) => void`	`undefined`	Focus event handler
`onBlur`	`(event: FocusEvent) => void`	`undefined`	Blur event handler

Variant Details

The variant prop controls the color scheme of the link:

primary - Primary brand color (default blue)
success - Success/positive actions (green)
warning - Warning/caution actions (orange/yellow)
danger - Destructive/dangerous actions (red)
monochrome - Neutral grayscale appearance
'' (empty) - Default styling without variant

Button-Specific Props

When isButton is true, you can customize the button appearance:

Button Sizes

x-sm - Extra small button
sm - Small button
md - Medium button (default)
lg - Large button
xl - Extra large button

Button Shapes

'' (default) - Standard
rounded - Medium rounded corners
capsule - Fully rounded pill shape
circle - Perfect circle (best for icon-only buttons)
square - Sharp corners, square shape
rounded-square - Square with rounded corners

Button Bordered

When buttonBordered is true, the button has a transparent background with a colored border that matches the variant. On hover, the background fills with the variant color.

Slots

Slot	Description
default	Link text or content

CSS Parts

Part	Description
`ag-link`	The internal `<a>` or `<span>` element

Use CSS parts to customize the link appearance:

css

ag-link::part(ag-link) {
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}

/* Custom gradient link */
ag-link::part(ag-link) {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

Events

The Link component relies on native browser events which bubble automatically:

Event	Type	Description
`click`	`MouseEvent`	Fires when the link is clicked
`focus`	`FocusEvent`	Fires when the link receives focus
`blur`	`FocusEvent`	Fires when the link loses focus

Accessibility

Native Semantics

Renders a native <a> element for proper semantics
Automatic keyboard navigation (Tab key)
Screen reader announcements
Native focus management
Browser right-click context menu support

Links with href are automatically keyboard-focusable
Clear, visible focus indicator using design token --ag-focus
Enter key activates the link (browser default)

Disabled State

When disabled, renders a <span> instead of <a> to remove interactivity
Adds aria-disabled="true" and role="link" for assistive technologies
Visual styling indicates disabled state

External Links

Automatically adds rel="noopener noreferrer" and target="_blank" when external prop is true
Consider adding visual indicator (e.g., arrow icon) to inform users

Best Practices

Use descriptive link text that clearly indicates the link's purpose
Avoid generic text like "Click Here" or "Learn More" without context
For icon-only links, provide an aria-label
Do not wrap links around other interactive elements
Links should be visually distinguishable from non-link text (underlined by default)

Link ​

Examples ​

Basic Links

Variant Links

Button-Style Links

Button Sizes

Button Shapes

Bordered Buttons

Complex Button Combinations

External Link

Disabled Links

Accessible Icon Links

Call-to-Action Pattern

Action Bar Pattern

Usage ​

Props ​

Variant Details ​

Button-Specific Props ​

Button Sizes ​

Button Shapes ​

Button Bordered ​

Slots ​

CSS Parts ​

Events ​

Accessibility ​

Native Semantics ​

Keyboard Navigation ​

Disabled State ​

External Links ​

Best Practices ​

Link

Examples

Usage

Props

Variant Details

Button-Specific Props

Button Sizes

Button Shapes

Button Bordered

Slots

CSS Parts

Events

Accessibility

Native Semantics

Keyboard Navigation

Disabled State

External Links

Best Practices