144 lines
2.5 KiB
Markdown
144 lines
2.5 KiB
Markdown
<script setup>
|
|
import Pill from '~/components/ui/Pill.vue'
|
|
</script>
|
|
|
|
# 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 |
|
|
|
|
### 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>
|