MazLink

MazLink is a standalone component to create links and buttons.

Before use it, you should install the MazUi plugin in your project, follow instructions in Getting Started

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 (primary) </MazLink>
<MazLink color="secondary"> View product detail (secondary) </MazLink>
<MazLink color="info"> View product detail (info) </MazLink>
<MazLink color="success"> View product detail (success) </MazLink>
<MazLink color="warning"> View product detail (warning) </MazLink>
<MazLink color="destructive"> View product detail (destructive) </MazLink>
<MazLink color="accent"> View product detail (accent) </MazLink>
<MazLink color="contrast"> View product detail (contrast) </MazLink>
<MazLink color="surface"> View product detail (surface) </MazLink>
<MazLink color="muted"> View product detail (muted) </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 start-icon and end-icon props.

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

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

<template>
  <MazLink start-icon="/home.svg" :end-icon="MazHome">
    View product detail
  </MazLink>

  <MazLink start-icon="/home.svg" :end-icon="MazHome">
    View product detail
  </MazLink>
</template>

startIcon and endIcon also accept a full MazIconProps object — pass the same shape <MazIcon> accepts to override the icon size, add a <title> for screen readers, etc.

<MazLink
  href="/external"
  :end-icon="{
    icon: MazArrowRight,
    size: 'lg',
    title: 'Go to external page',
    flipIconForRtl: true,
  }"
>
  Read more
</MazLink>

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 or nuxt-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" | "RouterLink" | "NuxtLink"	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 | "muted" | "surface" | "inherit"	No	primary' When 'none', the link will not have any color, so it will inherit the color of the parent	-
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	-
start-icon	Icon displayed on the inline-start edge (left in LTR, right in RTL). Accepts a bare value (Vue component, raw SVG string, URL or data: URI) or a full MazIconProps object for fine-grained control.	MazIconLike	No	undefined	-
end-icon	Icon displayed on the inline-end edge (right in LTR, left in RTL). Accepts a bare value or a full MazIconProps object.	MazIconLike	No	undefined	-
disabled	The disabled state of the link if the component is a button	boolean	No	false	-

Slots

Name	Description	Bindings
start-icon	The icon to display on the inline-start edge of the text (left in LTR, right in RTL)
default	Text of the link
end-icon	The icon to display on the inline-end edge of the text (right in LTR, left in RTL)
external-icon	Replace the default external icon