Funkwhale UI

Appearance

ts
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 inline as an <a> element [MDN]: Home

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

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

Active states ​

  • If any ancestor path matches, the .router-link-active class is added
  • If the whole path matches, the .router-link-exact-active class is added

See the Vue docs for a primer on Path matching.

In addition to the standard Vue RouterLink path matching function, we use this algorithm:

  • If the destination of the link contains any query parameter and none of these is set (i.e. they are all undefined), then the class .router-link-no-matching-query-flags is added.

This is particularly useful for modals.

Open modal

Colors and Variants ​

See Using color

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

Shapes ​

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

Add an icon ​

You can use Bootstrap Icons in your link component.

INFO

  • Icon links shrink down to the icon size if you don't pass any content. If you want to keep the link at full width with just an icon, add button-width as a prop.
template
<Link :to  icon="bi-three-dots-vertical" />
<Link :to primary solid round icon="bi-save"/>
<Link :to solid destructive icon="bi-trash">
  Delete
</Link :to>
<Link :to low-height icon="bi-chevron-right">
  Next
</Link>
Delete Next

Set width and alignment ​

See Using width and Using alignment.

template
  <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-contenttinybuttonWidthsmallmediumfullauto
🐌🐌🐌
🐌🐌🐌

Add an icon ​

INFO

The hidden label of an icon-only link defaults to the icon's name. Use text labels for better accessibility. In a future version, this component will support authoring a hidden label.

Note that buttons without any visible label create barriers for the users, and only use them where the icon itself is a specific and recognisable label (for example for "Play" or "Pause"). Cases such as Ellipsis, Caret or Hamburger icons for progressive disclosure, or Pencil icons for "Edit" links need to be tested in actual use situations.

Use Bootstrap Icons such as 'list-check' or 'list-ol' for the icon prop.

How-to

Full-width icon button: Icon buttons shrink down to the icon size if you don't pass any content. If you want to keep the button at full width with just an icon, add button-width as a prop.

Right-aligned icon: When combining icons with other content, prefix the icon prop with right to place it after the content.

Large icon: To make icons large, add large to the icon prop.

Using this component

A11y Checklist ​

template
<Link
  to="https://funkwhale.audio"
  aria-label="Go to homepage"
  icon="bi bi-house"
/>
<p>
  Lorem ipsum dolor sit amet, <Link to="https://funkwhale.audio">
    Text-only link in a paragraph
  </Link>, consectetur adipiscing elit.
</p>
<Link
  to="https://funkwhale.audio"
  solid
  secondary
>
  Link with solid secondary background
</Link>
<Link
  to="https://funkwhale.audio"
  solid
  primary
>
  Link with solid primary background
</Link>

Test this component in isolation against WCAG2 criteria