Link

<script setup lang="ts">
import MtLink from "@shopware-ag/meteor-component-library/MtLink";
</script>

<template>
  <mt-link to="#">Link</mt-link>
</template>

Usage

Link is a text-level navigation control that moves users to another page, route, or destination. Use it for inline links, secondary navigation, and text-level actions where the destination should feel lightweight and text-like instead of button-like, and use the type prop when an internal or external destination should be signaled visually.

import { MtLink } from "@shopware-ag/meteor-component-library";

Examples

Critical

<script setup lang="ts">
import MtLink from "@shopware-ag/meteor-component-library/MtLink";
</script>

<template>
  <mt-link to="#" variant="critical">Critical link</mt-link>
</template>

Disabled

<script setup lang="ts">
import MtLink from "@shopware-ag/meteor-component-library/MtLink";
</script>

<template>
  <mt-link to="#" disabled>Disabled link</mt-link>
</template>

External

<script setup lang="ts">
import MtLink from "@shopware-ag/meteor-component-library/MtLink";
</script>

<template>
  <mt-link to="https://www.shopware.com" type="external">External link</mt-link>
</template>

Internal

<script setup lang="ts">
import MtLink from "@shopware-ag/meteor-component-library/MtLink";
</script>

<template>
  <mt-link to="#" type="internal">Internal link</mt-link>
</template>

API reference

Props

Prop	Type	Default
`to`	`string`
`as`	`string`	`"router-link"`
`variant`	`"critical" \| "primary"`	`"primary"`
`disabled`	`boolean`	`false`
`type`	`"external" \| "internal"`

Events

Event	Payload
`click`	`[event: MouseEvent]`

Slots

Slot	Bindings
`default`	`{}`

Best practices

Use link text that clearly describes the destination or result.
Use the type prop when an internal or external destination should be signaled visually.
Keep Link close to the content or context it belongs to.

Don't

Do not use Link for actions that stay on the current page.
Do not use vague text such as Click here when the destination matters.
Do not disable a link unless removing navigation is genuinely necessary.

Behavior

Link can render different elements through the as prop and defaults to a router-link.
variant changes the visual emphasis, while type can add an internal or external direction cue.
disabled removes the active destination and click behavior.

Accessibility

Link text should make sense out of context so screen reader users can understand the destination.
Use Link only when the control actually navigates somewhere.
Make sure disabled links are used sparingly, since unavailable navigation can be confusing.

Button: when the user should trigger an action on the current page.

Edit this pageorReport an issue

Inset

A layout utility that lets content break out to the edges of a padded container, such as a Card, by consuming the container's inset spacing variables.

Loader

An indeterminate loading indicator shown as a centered spinner overlay.