Funkwhale UI

Appearance

ts
import Pill from "@ui/Pill.vue"

Pill ​

Pills are decorative elements that display information about content they attach to. They can be links to other content or simple colored labels.

You can add text to pills by adding it between the <Pill> tags. Alternatively, you can set v-model and make the pill editable.

ts
{ noUnderline?: true,
  cancel?: string,
  autofocus?: boolean
} & (PastelProps | ColorProps | DefaultProps)
  & VariantProps
  & RaisedProps

-> Let the user create lists of pills

NOTE

Make sure to convey the intent of the pill in an accessible way. Do not omit the text content. If you are forced to use only icons/images as the contents of a pill, label them with meaningful alt text. Read more on form field labelling

Primary ​

Primary pills convey positive information.

template
<Pill primary>
  Primary pill
</Pill>

Secondary ​

Secondary pills convey neutral or simple decorational information such as genre tags.

INFO

This is the default type for pills. If you don't specify a type, a secondary pill is rendered.

template
<Pill>
  Secondary pill
</Pill>

Destructive ​

Destructive pills convey destructive or negative information. Use these to indicate that information could cause issues such as data loss.

template
<Pill destructive>
  Destructive pill
</Pill>

Pill colors ​

Funkwhale pills support a range of pastel colors to create visually appealing interfaces.

Blue ​

template
<Pill blue>
  Blue pill
</Pill>

Red ​

template
<Pill red>
  Red pill
</Pill>

Purple ​

template
<Pill purple>
  Purple pill
</Pill>

Green ​

template
<Pill green>
  Green pill
</Pill>

Yellow ​

template
<Pill yellow>
  Yellow pill
</Pill>

Add an image ​

Image pills contain a small circular image on their left. These can be used for decorative links such as artist links. To created an image pill, insert a link to the image between the pill tags as a <template>.

template
<Pill>
  <template #image>
    <div style="background-color: #ff0" />
  </template>
  Awesome artist
</Pill>

Reduce space between image/icon and text ​

template
<Pill>
  <template #image>
    <div style="background-color: currentcolor; width: 8px; height: 8px; margin: 8px;" />
  </template>
  <span style="margin-left: -12px;">
    Awesome artist
  </span>
</Pill>

Editable pill ​

Add v-model="..." to link the pill content to a ref with one current item and zero or more others. Set each item's type to preset or custom.

  • The current item can be changed by the user.
  • The other items can be selected instead of the current.
  • Items with type custom can be edited and deleted by the user. preset items can only be selected or deselected.
ts
import { ref } from "vue"
const current = ref({ type: 'custom', label: 'I-am-custom.-Change-me!' })
const others = ref([
    { type: 'preset', label: 'Preset-1' },
    { type: 'preset', label: 'Preset-2' },
    { type: 'preset', label: 'Preset-3' },
  ])
template
<Pill
  v-model:current="current"
  v-model:others="others"
/>

Add a primary action ​

template
<Pill @click="alert('Primary')"> Open alert on click </Pill>

If the pill content does not describe what the pill does, add an accessible label:

Add a secondary action ​

template
<Pill
  v-model:current="current"
  v-model:others="others"
>
  <template #action>
    <Button ghost primary round icon="bi-x"
    aria-label="Deselect"
      title="Deselect"
      @click.stop.prevent="() => {
        if (customTag.current.type === 'custom')
          customTag.others.push({...customTag.current});
        customTag.current = {label: '', type: 'custom'}
      }"
    />
  </template>
</Pill>

{ "type": "custom", "label": "I-am-custom.-Change-me!" } (+ 3 other options)

Override the cursor ​

With the css variable --cursor, you can override the default (pointer):

css
--cursor: text;

Using this component

A11y Checklist ​

Accessible pill ​

Test this component in isolation against WCAG2 criteria