---
title: "MazLink"
description: "MazLink is a standalone component to create links and buttons."
package: "maz-ui"
url: "https://maz-ui.com/components/maz-link"
---

# MazLink

> MazLink is a standalone component to create links and buttons.

- Package: `maz-ui`
- Import: `import MazLink from 'maz-ui/components/MazLink'`
- Nuxt: auto-imported by `@maz-ui/nuxt`, no import needed in a Nuxt app
- Web: https://maz-ui.com/components/maz-link

> Before use it, you should install the MazUi plugin in your project, follow instructions in [Getting Started](../guide/getting-started.md)

## Basic usage

```vue
<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

```html
<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.

```html
<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](./maz-btn.md#icons) page.

```vue
<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.

```vue
<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`.

```html
<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.

```vue
<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>
```

## MazLink API

`import MazLink from 'maz-ui/components/MazLink'`

### Props

- `as` (`string`, default: `depends on the provided props`): 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. Values: `'router-link'`, `'nuxt-link'`, `'button'` (non exhaustive).
- `id` (`string`): The id of the link.
- `title` (`string`): The title of the link.
- `href` (`string`): The href of the link.
- `to` (`string | et | X`): The route location (router-link) of the link.
- `color` (`"primary" | "secondary" | "accent" | "info" | "success" | "warning" | "destructive" | "contrast" | "transparent" | "surface" | "muted" | "inherit"`, default: `"primary"`): The color of the link.
- `target` (`string`, default: `"_self"`): The target of the link. Values: `'_blank'`, `'_self'`, `'_parent'`, `'_top'` (non exhaustive).
- `download` (`string`): The download of the link.
- `rel` (`string`): The rel of the link.
- `aria-label` (`string`): The aria-label of the link (or of the button).
- `underline` (`boolean`, default: `false`): Add an underline to the link.
- `underline-hover` (`boolean`, default: `true`): Add an underline only on hover.
- `auto-external` (`boolean`, default: `true`): Add an external icon to the link if target is '_blank'.
- `start-icon` (`MazIconLike`): 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.
- `end-icon` (`MazIconLike`): Icon displayed on the inline-end edge (right in LTR, left in RTL). Accepts a bare value or a full `MazIconProps` object.
- `disabled` (`boolean`, default: `false`): The disabled state of the link if the component is a button.

### Slots

- `#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