Link

import { XerLink } from "@xerius/codey-components";

Showcases

Default

With Icon

With Icon in Paragraph

With Icon Only

With Custom Styles

Default behavior

When passing an absolute url (ex. https://www.xerius.be) into the href attribute the link component will be rendered as a <a href>-tag by default and ignore the type prop.

The same behavior will occur when there is no router available in the Vue instance.

Router-link

The link component can be rendered as a router-link to work with the VueRouter. It will make the following checks before rendering it as a router-link otherwise it will render the link as a default <a href>-tag:

• The href should be an absolute link (ex. /about)
• There should be a VueRouter available in the Vue instance

<XerLink href="/about">This is a router-link</XerLink>

Props

Name	Type	Default	Default	Description
iconOnly	Boolean	false	false	If set to true, the link's content will only be an icon.
customStyle	Boolean	false	false	If set to true, the link will not contain the default xer-link, xer-link--icon css class.
type	String	router-link	false	The type of the link component used (see Vue Router).
href	String		false	The path the link will go to.
isExternalLink	Boolean	false	false	If set to true, link will be handeld as an external link.
disabled	Boolean	false	false	If set to true, the link will be disabled.
dataAutomationId	String	link	false	The automation id for the component