MazLink

MazLink is a standalone component to create links and buttons.

Basic usage

View product detail

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

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

Color

<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="destructive"> View product detail </MazLink>
<MazLink color="accent"> View product detail </MazLink>
<MazLink color="contrast"> 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.

<script lang="ts" setup>
import { MazCheck, MazHome } from '@maz-ui/icons'
</script>

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

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

External icon (true by default)

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>

As button

If no to or href is provided, the component will be a button by default. You can force the component to be a button, a, router-link or nuxt-link with the as prop.

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

<template>
  <MazLink as="button"> View product detail </MazLink>
  <MazLink as="button" disabled> View product detail </MazLink>
</template>

Props

Name	Description	Type	Required	Default	Possible values
class	The class attribute of the link	Native type	No	undefined	-
style	The style attribute of the link	Native type	No	undefined	-
as	The component to use for the link - if not provided, it will be router-link if to is provided, will be a if href is provided, otherwise it will be button, you can force the component to be used with as prop	string | "a" | "router-link" | "nuxt-link" | "button"	No	depends on the provided props	a', 'router-link', 'nuxt-link', 'button
id	The id of the link	string	No	undefined	-
title	The title of the link	string	No	undefined	-
href	The href of the link	string	No	undefined	-
to	The route location (router-link) of the link	RouteLocationRaw	No	undefined	-
color	The color of the link	MazColor	No	primary	-
target	The target of the link	"_blank" | "_self" | "_parent" | "_top" | string	No	_self	_blank', '_self', '_parent', '_top
download	The download of the link	string	No	undefined	-
rel	The rel of the link	string	No	undefined	-
aria-label	The aria-label of the link	string	No	undefined	-
underline	Add an underline to the link	boolean	No	false	-
underline-hover	Add an underline only on hover	boolean	No	true	-
auto-external	Add an external icon to the link if target is '_blank'	boolean	No	true	-
left-icon	The name of the icon or component to display on the left of the text @type {string | FunctionalComponent | ComponentPublicInstance | Component}	string | IconComponent	No	undefined	-
right-icon	The name of the icon or component to display on the right of the text @type {string | FunctionalComponent | ComponentPublicInstance | Component}	string | IconComponent	No	undefined	-
disabled	The disabled state of the link if the component is a button	boolean	No	false	-

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