Link

Styled anchor for in-app and external navigation.

Introduction

The Link component is a themed anchor for navigation within your app or to external resources. It supports semantic colors, underline behavior, and optional leading or trailing icons.

Use Link when the primary action is navigation. For actions that trigger behavior without changing location, prefer Button.

Import

import { Link } from "@bridge-ui/vue/Components/Link";

import { Link } from "@bridge-ui/react/Components/Link";

Basic usage

Pass an href and children (or the default slot in Vue) for the link text. Use color and underline to adjust appearance.

<script setup lang="ts">
import { Link } from "@bridge-ui/vue/Components/Link";
</script>

<template>
  <div class="flex w-full flex-col gap-4">
    <Link href="/dashboard">Dashboard</Link>

    <Link color="primary" underline="hover" href="https://example.com">
      External link
    </Link>
  </div>
</template>

import { Link } from "@bridge-ui/react/Components/Link";

export default function LinkBasic() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Link href="/dashboard">Dashboard</Link>

      <Link color="primary" underline="hover" href="https://example.com">
        External link
      </Link>
    </div>
  );
}

Colors

Use the color prop to convey semantic meaning. Available colors: primary, secondary, success, info, warning, error, and dark.

<script setup lang="ts">
import { Link } from "@bridge-ui/vue/Components/Link";
</script>

<template>
  <div class="flex w-full flex-col gap-3">
    <Link href="#" color="primary">primary link</Link>
    <Link href="#" color="secondary">secondary link</Link>
    <Link href="#" color="success">success link</Link>
    <Link href="#" color="info">info link</Link>
    <Link href="#" color="warning">warning link</Link>
    <Link href="#" color="error">error link</Link>
    <Link href="#" color="dark">dark link</Link>
  </div>
</template>

import { Link } from "@bridge-ui/react/Components/Link";

export default function LinkColors() {
  return (
    <div className="flex w-full flex-col gap-3">
      <Link href="#" color="primary">
        primary link
      </Link>
      <Link href="#" color="secondary">
        secondary link
      </Link>
      <Link href="#" color="success">
        success link
      </Link>
      <Link href="#" color="info">
        info link
      </Link>
      <Link href="#" color="warning">
        warning link
      </Link>
      <Link href="#" color="error">
        error link
      </Link>
      <Link href="#" color="dark">
        dark link
      </Link>
    </div>
  );
}

Sizes

Change typography with the size prop: 2xs, xs, sm, md (default), lg, xl, and 2xl.

<script setup lang="ts">
import { Link as BridgeLink } from "@bridge-ui/vue/Components/Link";
</script>

<template>
  <div class="flex flex-col gap-2">
    <BridgeLink href="#" size="2xs">2xs link</BridgeLink>
    <BridgeLink href="#" size="xs">xs link</BridgeLink>
    <BridgeLink href="#" size="sm">sm link</BridgeLink>
    <BridgeLink href="#" size="md">md link</BridgeLink>
    <BridgeLink href="#" size="lg">lg link</BridgeLink>
    <BridgeLink href="#" size="xl">xl link</BridgeLink>
    <BridgeLink href="#" size="2xl">2xl link</BridgeLink>
  </div>
</template>

import { Link as BridgeLink } from "@bridge-ui/react/Components/Link";

const LinkSizes = () => (
  <div className="flex flex-col gap-2">
    <BridgeLink href="#" size="2xs">
      2xs link
    </BridgeLink>
    <BridgeLink href="#" size="xs">
      xs link
    </BridgeLink>
    <BridgeLink href="#" size="sm">
      sm link
    </BridgeLink>
    <BridgeLink href="#" size="md">
      md link
    </BridgeLink>
    <BridgeLink href="#" size="lg">
      lg link
    </BridgeLink>
    <BridgeLink href="#" size="xl">
      xl link
    </BridgeLink>
    <BridgeLink href="#" size="2xl">
      2xl link
    </BridgeLink>
  </div>
);

export default LinkSizes;

Underline

Control underline behavior with the underline prop: hover (default), always, or none.

<script setup lang="ts">
import { Link } from "@bridge-ui/vue/Components/Link";
</script>

<template>
  <div class="flex w-full flex-col gap-3">
    <Link href="#" underline="hover">Underline: hover</Link>
    <Link href="#" underline="always">Underline: always</Link>
    <Link href="#" underline="none">Underline: none</Link>
  </div>
</template>

import { Link } from "@bridge-ui/react/Components/Link";

export default function LinkUnderline() {
  return (
    <div className="flex w-full flex-col gap-3">
      <Link href="#" underline="hover">
        Underline: hover
      </Link>
      <Link href="#" underline="always">
        Underline: always
      </Link>
      <Link href="#" underline="none">
        Underline: none
      </Link>
    </div>
  );
}

Icons

Add icons before or after the link text with leftIcon and rightIcon.

<script setup lang="ts">
import { ExternalLink, Info } from "@lucide/vue";

import { Link } from "@bridge-ui/vue/Components/Link";
</script>

<template>
  <div class="flex w-full flex-col gap-4">
    <Link href="#" :left-icon="Info">With left icon</Link>

    <Link href="#" :right-icon="ExternalLink">With right icon</Link>

    <Link href="#" :left-icon="Info" :right-icon="ExternalLink">
      With both icons
    </Link>
  </div>
</template>

import { ExternalLink, Info } from "lucide-react";

import { Link } from "@bridge-ui/react/Components/Link";

export default function LinkIcons() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Link href="#" leftIcon={Info}>
        With left icon
      </Link>

      <Link href="#" rightIcon={ExternalLink}>
        With right icon
      </Link>

      <Link href="#" leftIcon={Info} rightIcon={ExternalLink}>
        With both icons
      </Link>
    </div>
  );
}

States

Set disabled to prevent interaction (sets aria-disabled). Set external to open the link in a new tab with target="_blank" and rel="noopener noreferrer".

<script setup lang="ts">
import { Link } from "@bridge-ui/vue/Components/Link";
</script>

<template>
  <div class="flex w-full flex-col gap-4">
    <Link disabled href="/button">Disabled</Link>

    <Link external href="https://example.com">External</Link>
  </div>
</template>

import { Link } from "@bridge-ui/react/Components/Link";

export default function LinkStates() {
  return (
    <div className="flex w-full flex-col gap-4">
      <Link disabled href="/button">
        Disabled
      </Link>

      <Link external href="https://example.com">
        External
      </Link>
    </div>
  );
}

Button

Accessibility

Use specific link text—avoid generic phrases like “click here” or “learn more” without context.
Links should be visually distinguishable from surrounding text. The default underline="hover" reveals an underline on hover and focus.
When disabled is true, the link sets aria-disabled="true" and removes pointer interaction.
When external is true, the link opens in a new tab with target="_blank" and rel="noopener noreferrer". Consider adding visible or screen-reader text that the link opens externally.
Links are keyboard accessible: they receive focus in tab order and activate with Enter.

Anatomy

Link renders as an anchor with optional icon slots:

<a> <!-- root -->
  <svg> <!-- leftIcon (optional) -->
  <span> <!-- link text (children / default slot) -->
  <svg> <!-- rightIcon (optional) -->
</a>

Target parts with the classes prop: root, leftIcon, and rightIcon.

API

Prop	Type	Default	Description
href	string	—	The URL the link points to.
children	ReactNode	—	The link text (React). Use the default slot in Vue.
color	LinkColor	"primary"	Semantic color of the link.
underline	LinkUnderline	"hover"	Underline behavior: hover, always, or none.
size	LinkSize	"md"	Typography size of the link.
leftIcon	IconSource	—	Icon displayed before the link text.
rightIcon	IconSource	—	Icon displayed after the link text.
disabled	boolean	false	Whether the link is disabled.
external	boolean	false	Whether the link opens in a new tab.
classes	LinkClasses	—	Classes for root, leftIcon, rightIcon.
customProps	LinkCustomProps	—	Extra props for internal parts (leftIcon, rightIcon, etc.). Root HTML attributes stay on the component top level.
slots	LinkSlots	—	React slots: prepend, append.