funkwhale/front/ui-docs/components/ui/link.md

import Link from "~/components/ui/Link.vue"

Link

Users can navigate by following Links. They expect that in contrast to clicking a button, following a link does not manipulate items or trigger any action.

This component will render as an <a> element [MDN].

<Link to="/">
  Home
</Link>

Home

Instead of a route, you can set the prop to to any web address starting with http.

Colors and Variants

See Using color

A paragraph of text with an inline (uncolored) link: no color

default primary secondary destructive default solid primary solid secondary solid destructive solid

Only use on top of solid surfaces, else the text may be unreadable!

{{ color }} outline default ghost primary ghost secondary ghost destructive ghost

Shapes

<Link primary solid round to="/">
  Home
</Link>

Home

Set width and alignment

See Using width and Using alignment.

  <Link solid primary min-content to="/">min-content</Link>
  <Link solid primary tiny to="/">tiny</Link>
  <Link solid primary buttonWidth to="/">buttonWidth</Link>
  <Link solid primary small to="/">small</Link>
  <Link solid primary medium to="/">medium</Link>
  <Link solid primary full to="/">full</Link>
  <Link solid primary auto to="/">auto</Link>
  <hr />
  <Link solid primary alignSelf="start" to="/">🐌</Link>
  <Link solid primary alignSelf="center" to="/">🐌</Link>
  <Link solid primary alignSelf="end" to="/">🐌</Link>
  <hr />
  <Link solid primary alignText="left" to="/">🐌</Link>
  <Link solid primary alignText="center" to="/">🐌</Link>
  <Link solid primary alignText="right" to="/">🐌</Link>

min-content tiny buttonWidth small medium full auto

---

🐌 🐌 🐌

---

🐌 🐌 🐌