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

<script setup>
import Pill from '~/components/ui/Pill.vue'
</script>

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

| 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](./pills)

### Primary

Primary pills convey **positive** information.

```vue-html
<Pill primary>
  Primary pill
</Pill>
```

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

```vue-html
<Pill>
  Secondary pill
</Pill>
```

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

```vue-html
<Pill destructive>
  Destructive pill
</Pill>
```

<Pill destructive>
  Destructive pill
</Pill>

## Pill colors

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

### Blue

```vue-html
<Pill blue>
  Blue pill
</Pill>
```

<Pill blue>
  Blue pill
</Pill>

### Red

```vue-html
<Pill red>
  Red pill
</Pill>
```

<Pill red>
  Red pill
</Pill>

### Purple

```vue-html
<Pill purple>
  Purple pill
</Pill>
```

<Pill purple>
  Purple pill
</Pill>

### Green

```vue-html
<Pill green>
  Green pill
</Pill>
```

<Pill green>
  Green pill
</Pill>

### Yellow

```vue-html
<Pill yellow>
  Yellow pill
</Pill>
```

<Pill yellow>
  Yellow pill
</Pill>

## Image pills

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

```vue-html{2-4}
<Pill>
  <template #image>
    <img src="/images/awesome-artist.png" />
  </template>
  Awesome artist
</Pill>
```

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