Link

A text hyperlink component with pixel-art styling.

?

Name	Category	Description	Type	Default
type	? Style	Type	'primary' | 'success' | 'info' | 'warning' | 'danger'	—
underline	? Style	Whether to show underline	boolean	true
color	? Color	Custom hex color	string	—
disabled	? State	Whether disabled	boolean	false
target	? Behavior	Link target	string	—
href	? Content	Link URL	string	—
click	? Event	Click event	(event: MouseEvent) => void	—
default	? Slot	Link content		—

Basic Usage

Basic link with an href pointing to an external URL.

<template>
  <px-link href="https://github.com/SaKaNa-Y/sakana-element" target="_blank">
    Sakana Element on GitHub
  </px-link>
</template>

<script setup lang="ts">
</script>

Types

Use type property to define different color variants.

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap;">
    <px-link>Default</px-link>
    <px-link type="primary">Primary</px-link>
    <px-link type="success">Success</px-link>
    <px-link type="info">Info</px-link>
    <px-link type="warning">Warning</px-link>
    <px-link type="danger">Danger</px-link>
  </div>
</template>

<script setup lang="ts">
</script>

Underline

Links show an underline by default. Set underline to false to remove it.

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap;">
    <px-link type="primary">With Underline (default)</px-link>
    <px-link type="primary" :underline="false">Without Underline</px-link>
  </div>
</template>

<script setup lang="ts">
</script>

Disabled

Use disabled to prevent interaction.

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap;">
    <px-link disabled>Default Disabled</px-link>
    <px-link type="primary" disabled>Primary Disabled</px-link>
    <px-link type="success" disabled>Success Disabled</px-link>
    <px-link type="danger" disabled>Danger Disabled</px-link>
  </div>
</template>

<script setup lang="ts">
</script>

Custom Color

Use color property to set a custom hex color.

<template>
  <div style="display: flex; gap: 16px; flex-wrap: wrap;">
    <px-link color="#e91e63">Pink Link</px-link>
    <px-link color="#ff9800">Orange Link</px-link>
    <px-link color="#9c27b0">Purple Link</px-link>
  </div>
</template>

<script setup lang="ts">
</script>