astryx-vue

Link

Usage ​

Import the component from its dedicated entry. Structural styles are loaded automatically.

vue
<script setup lang="ts">
import { Link } from '@astryx-vue/core/Link'
</script>

<template>
  <Link href="/docs">
    Documentation
  </Link>
  <Link href="https://github.com" is-external-link>
    GitHub
  </Link>
</template>

Best practices ​

GuidancePractice
RecommendedUse link text that describes the destination, e.g. "View docs" or "Contact us". Avoid "click here".
RecommendedUse isExternalLink for off-site links to add target="_blank" and rel="noopener noreferrer".
RecommendedUse color="secondary" to reduce visual weight in groups of links or paragraphs.
Don'tMake every piece of text a link; it weakens link discoverability.
Don'tMake a critical action only a link. Important actions should use Button.

Examples ​

Colors

Primary Secondary Accent Inherit

Links come in primary, secondary, accent, and inherit color variants. Without a color prop a link uses accent.

External link

GitHub External link with underline

isExternalLink opens in a new tab, adds an external indicator, and sets safe rel values.