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>