Phi / Link

<script setup>
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <div class="flex flex-wrap items-center gap-4">
    <Link href="#">Default inline link</Link>
    <Link href="#" variant="current">Current color link</Link>
    <Link href="#" variant="plain">Plain inline link</Link>
  </div>
</template>

Installation

Barrel

import { Link } from "@dicehub/phi";

Granular

import { Link } from "@dicehub/phi/components/link";

Usage

Basic Link

The default Link renders an underlined anchor with primary link color styling.

<script setup>
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <p>
    Read our <Link href="/docs">documentation</Link> for more details.
  </p>
</template>

External Links

Use Link.ExternalIcon to indicate links that open in a new tab.

<script setup>
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <Link
    href="https://example.com"
    target="_blank"
    rel="noopener noreferrer"
  >
    Visit example <Link.ExternalIcon />
  </Link>
</template>

Framework Integration

Routing behavior belongs to the application. Compose Link with your router's custom link slot when client-side navigation is required.

<script setup>
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <RouterLink to="/dashboard" custom v-slot="{ href, navigate }">
    <Link :href="href" @click="navigate">Dashboard</Link>
  </RouterLink>
</template>

Composition with RouterLink

<script setup>
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <RouterLink to="/dashboard" custom v-slot="{ href, navigate }">
    <Link :href="href" variant="inline" @click="navigate">
      Dashboard
    </Link>
  </RouterLink>
</template>

Examples

Inline in Paragraph

Links keep their underline offset readable inside body text.

<script setup>
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <p>
    This is a paragraph with an <Link href="#">inline link</Link> that flows
    naturally with the surrounding text. Links maintain proper underline
    offset for readability.
  </p>
</template>

External Link with Icon

Use Link.ExternalIcon to mark links that open in a new tab.

<script setup>
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <Link
    href="https://example.com"
    target="_blank"
    rel="noopener noreferrer"
  >
    Visit example <Link.ExternalIcon />
  </Link>
</template>

Current Variant (Color Inheritance)

Use current when the link should inherit color from its parent.

<script setup>
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <p class="message">
    This error message contains a
    <Link href="#" variant="current">link</Link>
    that inherits the parent color.
  </p>
</template>

Plain Links

Use plain for navigation-style links where underlines are distracting.

<script setup>
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <nav aria-label="Footer">
    <Link href="#" variant="plain">Status</Link>
    <Link href="#" variant="plain">Support</Link>
    <Link href="#" variant="plain">Security</Link>
  </nav>
</template>

Composition with RouterLink

Use your router's custom slot when Link should keep Phi styling during client-side navigation.

<script setup>
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <RouterLink to="/dashboard" custom v-slot="{ href, navigate }">
    <Link :href="href" variant="inline" @click="navigate">
      Dashboard
    </Link>
  </RouterLink>
</template>

Test IDs

Link forwards standard anchor attributes for testing and accessibility.

<script setup>
import { Link } from "@dicehub/phi/components/link";
</script>

<template>
  <Link href="/docs" data-testid="docs-link" aria-label="Open docs">
    Docs
  </Link>
</template>

API Reference

Link Props

Extends native anchor element attributes.

Prop	Type	Default	Description
`variant`	`"inline" \| "current" \| "plain"`	`"inline"`	Visual style of the link.
`href`	`string`	`-`	Link destination URL.
`target`	`string`	`-`	Native anchor target attribute.
`rel`	`string`	`-`	Native anchor rel attribute.
`default slot`	`slot`	`-`	Link content.
`class`	`string`	`-`	Additional CSS classes.

Variants

Variant	Description	Use Case
`inline`	Primary link color with underline.	Inline text links.
`current`	Inherits color from parent text with underline.	Alerts or colored text.
`plain`	Primary link color without underline.	Navigation, menus, footers.

Link.ExternalIcon

SVG icon component to indicate external links. It accepts standard SVG attributes and is hidden from assistive technology.

Design Guidelines

When to Use Each Variant

Use inline for body copy, current inside colored text, and plain for compact navigation groups.

External Link Indicators

Pair target="_blank" links with rel="noopener noreferrer" and Link.ExternalIcon when the destination leaves the current app.

Framework Integration

Keep routing behavior in the application layer and pass the resolved href into Link.

Accessibility

Use descriptive link text and avoid relying on the icon alone to explain the destination.