3.5 KiB

Raw Blame History

import Pill from "~/components/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.

Prop	Data type	Required?	Default	Description
`color`	`primary` \| `secondary` \| `destructive` \| `blue` \| `red` \| `purple` \| `green` \| `yellow`	No	`secondary`	Renders a colored pill

-> Let the user create lists of pills

Primary

Primary pills convey positive information.

<Pill primary>
  Primary pill
</Pill>

Primary 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. :::

<Pill>
  Secondary pill
</Pill>

Secondary pill

Destructive

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

<Pill destructive>
  Destructive pill
</Pill>

Destructive pill

Pill colors

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

Blue

<Pill blue>
  Blue pill
</Pill>

Blue pill

Red

<Pill red>
  Red pill
</Pill>

Red pill

Purple

<Pill purple>
  Purple pill
</Pill>

Purple pill

Green

<Pill green>
  Green pill
</Pill>

Green pill

Yellow

<Pill yellow>
  Yellow pill
</Pill>

Yellow pill

Image pill

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>.

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

Awesome artist

Editable pill

Add v-model="..." to link the pill content to a ref.

import { ref } from "vue"
const customTag = ref("Custom Tag")

<Pill v-model="customTag" />

<Button primary low-height
  :disabled="customTag === ''"
  :onClick="() => customTag = ''"
>
  Reset: {{ customTag }}
</Button>

Edit the text, then hit Enter or click outside. The button will show the updated text.

<Button primary low-height :disabled="customTag === ''" :onClick="() => customTag = ''"

Reset: {{ customTag }}

3.5 KiB Raw Blame History