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.

Colors

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

Sizes

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

Underline

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

Icons

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

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".

Router link

linkAs replaces the anchor. href is forwarded, and when linkAs is set it also accepts that component’s href. linkProps is checked against linkAs and forwarded to it. The component handles the click. Ignored while the link is disabled. AppLink below stands for your router link.

<Link
  href="/logout"
  :link-as="AppLink"
  :link-props="{ method: 'post', replace: true }"
>
  Logout
</Link>

<Link
  href="/logout"
  linkAs={AppLink}
  linkProps={{ method: "post", replace: true }}
>
  Logout
</Link>

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
children	ReactNode	—	The link text (React). Use the default slot in Vue.
classes	LinkClasses	—	Classes for root, leftIcon, rightIcon.
color	LinkColor	"primary"	Semantic color of the link.
customProps	LinkCustomProps	—	Extra props for internal parts (leftIcon, rightIcon, etc.). Root HTML attributes stay on the component top level.
disabled	boolean	false	Whether the link is disabled.
external	boolean	false	Whether the link opens in a new tab.
href	string	—	The URL the link points to. When linkAs is set, this also accepts that component’s href.
leftIcon	IconSource	—	Icon displayed before the link text.
linkAs	ElementType	—	Component rendered in place of the navigating anchor. Vue also accepts a string tag. Receives href, linkProps, and the anchor attributes. Ignored while disabled.
linkProps	props of linkAs	—	Props forwarded to linkAs. Checked against that component. Ignored while linkAs is not rendered.
rightIcon	IconSource	—	Icon displayed after the link text.
size	LinkSize	"md"	Typography size of the link.
slots	LinkSlots	—	React slots: prepend, append.
underline	LinkUnderline	"hover"	Underline behavior: hover, always, or none.