Link

A text link that can render as a native anchor or a router component.

The full list of components lives on the repository home page , and the style variables are covered in the installation guide.

<script setup lang="ts">
  import { Link, Text } from '@hina-ui/vue'
</script>

<template>
  <Text class="max-w-lg">
    The full list of components lives on the
    <Link href="https://github.com/Hikarinagi/ui" target="_blank" rel="noreferrer" underline>
      repository home page
    </Link>
    , and the style variables are covered in the installation guide.
  </Text>
</template>

vue

Usage

import { Link } from '@hina-ui/vue'

The component renders a native a by default and passes attributes straight through, so href, target and rel are written as usual. It uses the accent colour and no underline by default.

Back to Usage

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

<template>
  <Link href="#usage">Back to Usage</Link>
</template>

vue

Examples

Tones

Use accent for ordinary links in body text and navigation, and neutral where the surroundings are already emphasised and a second colour would be noise, such as breadcrumbs.

Accent link Neutral link

<script setup lang="ts">
  import { Inline, Link } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center" class="gap-6">
    <Link href="#tones">Accent link</Link>
    <Link href="#tones" tone="neutral">Neutral link</Link>
  </Inline>
</template>

vue

Underline

underline draws a rule under the text, faint at rest and stronger on hover. Turn it on where links appear densely in body text, so they can be told apart from ordinary words.

Without underline With underline

<script setup lang="ts">
  import { Inline, Link } from '@hina-ui/vue'
</script>

<template>
  <Inline align="center" class="gap-6">
    <Link href="#underline">Without underline</Link>
    <Link href="#underline" underline>With underline</Link>
  </Inline>
</template>

vue

Router links

as accepts a component, so the link can render as NuxtLink or another router component. Its properties are then written as that component expects, for example to.

Go to the Button page

<script setup lang="ts">
  import { Link } from '@hina-ui/vue'
  import { NuxtLink } from '#components'

  const localePath = useLocalePath()
</script>

<template>
  <Link :as="NuxtLink" :to="localePath('/components/button')" underline>Go to the Button page</Link>
</template>

vue

Links in body content

Prose gives native a elements inside it the accent colour and an underline, so rendered Markdown and rich text need no tag replacement.

A link in body content needs no separate component and is underlined by default.

<script setup lang="ts">
  import { Prose } from '@hina-ui/vue'
</script>

<template>
  <Prose class="max-w-lg">
    <p>
      A
      <a href="#prose">link</a>
      in body content needs no separate component and is underlined by default.
    </p>
  </Prose>
</template>

vue

API

Props

Prop	Type	Default	Description
`tone`	`'accent' \| 'neutral'`	`'accent'`	Semantic tone
`underline`	`boolean`	`false`	Whether to underline
`as`	`string \| Component`	`'a'`	Element or component to render
`asChild`	`boolean`	`false`	Render nothing, merging into the single child
`class`	`string`	—	Classes appended to the root

Slots

Slot	Description
`default`	The link text