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, and dark.

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

Related components

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