MazLink

MazLink is a standalone component

INFO

Before you have to import the global css files in your project, follow instructions in Getting Started

Basic usage

View product detail

<template>
  <MazLink href="https://maz-ui.com" target="_blank"> View product detail </MazLink>
</template>

<script lang="ts" setup>
  import MazLink from 'maz-ui/components/MazLink'
</script>

Color

View product detail View product detail View product detail View product detail View product detail View product detail View product detail View product detail View product detail

<MazLink color="primary"> View product detail </MazLink>
<MazLink color="secondary"> View product detail </MazLink>
<MazLink color="info"> View product detail </MazLink>
<MazLink color="success"> View product detail </MazLink>
<MazLink color="warning"> View product detail </MazLink>
<MazLink color="danger"> View product detail </MazLink>
<MazLink color="white"> View product detail </MazLink>
<MazLink color="black"> View product detail </MazLink>
<MazLink color="theme"> View product detail </MazLink>

RouterLink

When you use the to prop, the component will be a router-link and will use the router to navigate.

View product detail

<MazLink :to="{ path: '/' }"> View product detail </MazLink>

Icons

You can add an icon on the left and right to the link text with the left-icon and right-icon props.

For more information about the icons, please check the MazBtn page.

View product detail

<template>
  <MazLink left-icon="home" :right-icon="CheckIcon">
    View product detail
  </MazLink>
</template>

<script lang="ts" setup>
  import CheckIcon from 'maz-ui/icons/check.svg'
  import HomeIcon from 'maz-ui/icons/home.svg'
</script>

External icon

When you use the autoExternal prop, the component will have an external icon if the link has the target _blank.

View product detail

<MazLink href="https://loicmazuel.com" target="_blank" auto-external>
  View product detail
</MazLink>

Props & Slots

Props

Prop name	Description	Type	Values	Default
id	The id of the link	string	-	undefined
title	The title of the link	string	-	undefined
href	The href of the link @default undefined	string	-	undefined
to	The route location (router-link) of the link	RouteLocationRaw	-	undefined
color	The color of the link @default 'primary'	Color	-	'primary'
target	The target of the link @default '_self' @values '_blank', '_self', '_parent', '_top'	union	-	'_self'
download	The download of the link	string	-	undefined
rel	The rel of the link	string	-	undefined
ariaLabel	The aria-label of the link	string	-	undefined
underline	Add an underline to the link	boolean	-	false
underlineOnlyHover	Add an underline only on hover	boolean	-	true
autoExternal	Add an external icon to the link if target is '_blank' @default true	boolean	-	true
leftIcon	The name of the icon or component to display on the left of the text @type {string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}	union	-	undefined
rightIcon	The name of the icon or component to display on the right of the text @type {string | FunctionalComponent<SVGAttributes> | ComponentPublicInstance | Component}	union	-	undefined

Slots

Name	Description	Bindings
left-icon	The icon to display on the left of the text
default	Text of the link
right-icon	The icon to display on the left of the text
external-icon	Replace the default external icon