Link

Creates styled anchor elements for navigation or actions.

First release: 1.0.0 Latest update: July 1, 2025 Current version: 1.0.0

React

Angular

Vue

Svelte

HTML

Import

import { PlusLink } from '@plusui/react';

import { PlusLinkComponent } from '@plusui/angular';

import { PlusLink } from '@plusui/vue';

import PlusLink from '@plusui/svelte';

<script src="https://cdn.jsdelivr.net/npm/@plusui/core"></script>

Package

@plusui/react

@plusui/angular

@plusui/vue

@plusui/svelte

@plusui/core

Usage

<PlusLink />

<plus-link />

<plus-link />

<PlusLink />

<plus-link />

Docs

Changelog

Link Changelog

Recent changes and updates for the link component

v1.0.0

June 20, 2025

Feat

Added Link component for navigation

Internal and external link support
Multiple visual styles
Icon support
Accessibility attributes

The Link component renders a styled anchor (<a>) tag, providing options for navigation, interaction states, and visual customization like size and underline behavior.

Anatomy

Usage

Basic Example

A standard link with an href attribute.

Visit Plus UI

Show code

import { PlusLink } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusLink href="https://plusui.com">
        Visit Plus UI
      </PlusLink>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-link href="https://plusui.com">
      Visit Plus UI
    </plus-link>
  `
})
export class ExampleComponent {}

<template>
  <plus-link href="https://plusui.com">
    Visit Plus UI
  </plus-link>
</template>

<plus-link href="https://plusui.com">
  Visit Plus UI
</plus-link>

<plus-link href="https://plusui.com">
  Visit Plus UI
</plus-link>

Size

Control the link’s text size using the size prop.

Link Text

Show code

import { PlusLink } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusLink size="sm" href="https://plusui.com">
        Link Text
      </PlusLink>
      <PlusLink size="md" href="https://plusui.com">
        Link Text
      </PlusLink>
      <PlusLink size="lg" href="https://plusui.com">
        Link Text
      </PlusLink>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-link size="sm" href="https://plusui.com">
      Link Text
    </plus-link>
    <plus-link size="md" href="https://plusui.com">
      Link Text
    </plus-link>
    <plus-link size="lg" href="https://plusui.com">
      Link Text
    </plus-link>
  `
})
export class ExampleComponent {}

<template>
  <plus-link size="sm" href="https://plusui.com">
    Link Text
  </plus-link>
  <plus-link size="md" href="https://plusui.com">
    Link Text
  </plus-link>
  <plus-link size="lg" href="https://plusui.com">
    Link Text
  </plus-link>
</template>

<plus-link size="sm" href="https://plusui.com">
  Link Text
</plus-link>
<plus-link size="md" href="https://plusui.com">
  Link Text
</plus-link>
<plus-link size="lg" href="https://plusui.com">
  Link Text
</plus-link>

<plus-link size="sm" href="https://plusui.com">
  Link Text
</plus-link>
<plus-link size="md" href="https://plusui.com">
  Link Text
</plus-link>
<plus-link size="lg" href="https://plusui.com">
  Link Text
</plus-link>

Underline Behavior

Control when the underline appears using the underline prop.

Link Text

Show code

import { PlusLink } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusLink underline="never" href="https://plusui.com">
        Link Text
      </PlusLink>
      <PlusLink underline="hover" href="https://plusui.com">
        Link Text
      </PlusLink>
      <PlusLink underline="always" href="https://plusui.com">
        Link Text
      </PlusLink>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-link underline="never" href="https://plusui.com">
      Link Text
    </plus-link>
    <plus-link underline="hover" href="https://plusui.com">
      Link Text
    </plus-link>
    <plus-link underline="always" href="https://plusui.com">
      Link Text
    </plus-link>
  `
})
export class ExampleComponent {}

<template>
  <plus-link underline="never" href="https://plusui.com">
    Link Text
  </plus-link>
  <plus-link underline="hover" href="https://plusui.com">
    Link Text
  </plus-link>
  <plus-link underline="always" href="https://plusui.com">
    Link Text
  </plus-link>
</template>

<plus-link underline="never" href="https://plusui.com">
  Link Text
</plus-link>
<plus-link underline="hover" href="https://plusui.com">
  Link Text
</plus-link>
<plus-link underline="always" href="https://plusui.com">
  Link Text
</plus-link>

<plus-link underline="never" href="https://plusui.com">
  Link Text
</plus-link>
<plus-link underline="hover" href="https://plusui.com">
  Link Text
</plus-link>
<plus-link underline="always" href="https://plusui.com">
  Link Text
</plus-link>

Disabled

Disabled link component ensures that users receive visual and functional cues when a link cannot be interacted with, maintaining a user-friendly and inclusive experience.

Link Text

Show code

import { PlusLink } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusLink disabled="false">
        Link Text
      </PlusLink>
      <PlusLink disabled="true">
        Link Text
      </PlusLink>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-link disabled="false">
      Link Text
    </plus-link>
    <plus-link disabled="true">
      Link Text
    </plus-link>
  `
})
export class ExampleComponent {}

<template>
  <plus-link disabled="false">
    Link Text
  </plus-link>
  <plus-link disabled="true">
    Link Text
  </plus-link>
</template>

<plus-link disabled="false">
  Link Text
</plus-link>
<plus-link disabled="true">
  Link Text
</plus-link>

<plus-link disabled="false">
  Link Text
</plus-link>
<plus-link disabled="true">
  Link Text
</plus-link>

External Links

Use the external prop to open links in a new tab securely.

External Link (Opens in new tab)

Show code

import { PlusLink } from '@plusui/react';

export default () => {
  return (
    <>
      <PlusLink href="https://plusui.com" external="true">
        External Link (Opens in new tab)
      </PlusLink>
    </>
  );
};

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <plus-link href="https://plusui.com" external="true">
      External Link (Opens in new tab)
    </plus-link>
  `
})
export class ExampleComponent {}

<template>
  <plus-link href="https://plusui.com" external="true">
    External Link (Opens in new tab)
  </plus-link>
</template>

<plus-link href="https://plusui.com" external="true">
  External Link (Opens in new tab)
</plus-link>

<plus-link href="https://plusui.com" external="true">
  External Link (Opens in new tab)
</plus-link>

Layout & Spacing

Effective layout and spacing of link components play a vital role in crafting user-friendly, visually appealing, and accessible interfaces. Thoughtful consideration of how links are positioned and the space around them enhances both aesthetics and usability, resulting in an overall improved user experience. Properly spaced and arranged links make it easier for users to navigate and interact with your content, promoting an intuitive and engaging interface.

Light & Dark Mode

Implementing light and dark modes for link components enhances user experience, accessibility, and aesthetics. It accommodates various user preferences, improves readability, and keeps your design modern.

Accessibility

Accessibility is a core consideration for our link components, just like it is for buttons. Accessible links benefit users with disabilities and enhance the overall user experience, making our digital product more inclusive, user-friendly, and legally compliant. In this section, we’ll provide guidelines for ensuring accessibility in our link components.

Criteria	Description	Status
ARIA Hidden Elements	Ensures aria-hidden elements are not focusable nor contain focusable elements	Passed
ID Attributes	Ensures every id attribute value is unique	Passed
Discernible Text	Ensures links have discernible text	Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	AA ~ AAA

To learn more about Plus UI’s accessibility criteria, please visit Accessibility.

Design System

https://www.figma.com/community/file/1310670219738074447/plus-ui-design-system

Visit

API

Props

Property	Description	Type	Default
size	Controls the size of the link	’sm’ \| ‘md’ \| ‘lg’ \| ‘inherit'	'inherit’
disabled	Makes link non-interactive	boolean	false
readonly	Makes link non-interactive but styled	boolean	false
href	URL the link points to	string	”
target	Where to display linked URL	string	”
rel	Relationship to linked document	string	”
download	Download URL instead of navigating	string	”
loading	Shows loading state	boolean	false
external	Opens in new tab securely	boolean	false
underline	Controls underline style	’always’ \| ‘hover’ \| ‘never'	'hover’

Events

Event	Description	Event Detail
plus-click	Emitted when link is clicked	-
plus-focus	Emitted when link gets focus	-
plus-blur	Emitted when link loses focus	-

Slots

Name	Description
default	Main content of the link
prefix	Content before the main content
suffix	Content after the main content

Join the Community

Plus UI is built by the community. Join us on our platforms to contribute, get help, and stay up to date.

Figma GitHub Discord Twitter Open Collective