Funkwhale UI

Appearance

ts
import Token from '~/ui/Token.vue'

Token ​

Represents an object. You can link the object (to({ object })) or add an @click event. Place multiple tokens in a <span> to let them overlap.

Image and action slots
blue red ochre Link 1 Link 2 Link 2

Code

ts
const props = defineProps<WithAttributes<{
  class: {
    color?: Extract<Color, `${string}-solid`> | 'color-primary'
  }
  /**
   * Use when the token is part of a fixed tuple of tokens and removing it entirely would confuse the user
   */
  disabled?: boolean

  /**
    * Pass `RouterLink` or use the `to()` helper
    * @default `<span>` tag
    */
  is?: Component | 'a' | 'button'

  onClick?: (e: MouseEvent) => void
} & Labeled & Activated>>()

Image and Action slots ​

template
<Token>
  <template #image>
    <Icon icon="bi:music-note" class="color-accent-solid shape-circle" />
  </template>
  Image and action slots
  <template #action>
    <Button
      class="shape-circle"
      :on-click
    >
      <Icon icon="bi:three-dots" />
    </Button>
  </template>
</Token>

Using this component

A11y Checklist ​

Accessible Token ​

template
<span>
  <Token>
    <template #image>
      <Icon icon="bi:music-note" class="color-accent-solid shape-circle" />
    </template>
    Image and action slots
    <template #action>
      <Button
        class="shape-circle"
        :on-click
      >
        <Icon icon="bi:three-dots" />
      </Button>
    </template>
  </Token>
  <Token class="color-blue-solid">
    blue
  </Token>
  <Token class="color-red-solid">
    red
  </Token>
  <Token class="color-ochre-solid">
    ochre
  </Token>
  <Token
    is="a"
    href="./"
  >
    Link 1
  </Token>
  <Token
    is="a"
    href="./"
    class="color-primary-solid"
  >
    Link 2
  </Token>
  <Token
    is="a"
    href="./"
    class="color-accent-solid"
  >
    Link 2
  </Token>
</span>

Test this component in isolation against WCAG2 criteria