Installation

npm i @tryg/vue-ui-library

Usage

<anchor-link href="http://tryg.com/">Some text here</anchor-link>

Install the component library as a Vue plugin. This globally registers all Anchor components.

main.js

import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';

const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');

YourComponent.vue

<template>
  <anchor-link href="http://tryg.com/">Some text here</anchor-link>
</template>

Import only the components you need for optimal bundle size.

YourComponent.vue

<script setup>
import { AnchorLink } from '@tryg/vue-ui-library';
</script>
<template>
  <anchor-link href="http://tryg.com/">Some text here</anchor-link>
</template>

Inside of a paragraph

Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, <anchor-link href="http://tryg.com/">consectetur</anchor-link>, adipisci velit...

Variants

<anchor-link href="http://tryg.com/" variant="black">Some text here</anchor-link>
<anchor-link href="http://tryg.com/" variant="brand">Some text here</anchor-link>
<anchor-link href="http://tryg.com/" variant="white">Some text here</anchor-link>

External

<anchor-link href="http://tryg.com/" is-external>Some text here</anchor-link>

Accessibility

Renders as a native <a> element, inheriting standard anchor semantics and keyboard navigation support.
When the is-external prop is set, the link automatically receives target="_blank" and rel="noopener noreferrer" for security, and displays an external link icon to visually indicate it opens in a new tab.
Screen readers announce links by their text content -- ensure the slotted text clearly describes the link destination.
The external link icon is rendered with aria-hidden="true" (inherited from the Icon component), so it will not be announced as redundant information to screen readers.

API

anchor-link

Properties

Property	Attribute	Description	Type	Default
`download`	`download`	This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). Documentation	`string`	`undefined`
`href`	`href`	Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. Documentation	`string`	`undefined`
`isExternal`	`is-external`	Marking the link as external will add `target="_blank"` and `rel="noopener noreferrer"` attributes to the link, along with an icon illustrating to the user they're about to leave the page.	`boolean`	`undefined`
`ping`	`ping`	The ping property is a space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Documentation	`string`	`undefined`
`referrerpolicy`	`referrerpolicy`	How much of the referrer to send when following the link. Documentation	`"no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url"`	`undefined`
`rel`	`rel`	Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.	`string`	`undefined`
`target`	`target`	Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. Documentation	`"_blank" \| "_parent" \| "_self" \| "_top"`	`undefined`
`type`	`type`	Hints at the linked URL's format with a MIME type. No built-in functionality. Documentation	`string`	`undefined`
`variant`	`variant`		`"black" \| "brand" \| "white"`	`'black'`

Dependencies

Depends on

anchor-icon

Graph

graph TD;
  anchor-link --> anchor-icon
  style anchor-link fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS

Link3.0