2.9 KiB
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 <fw-pill> tags.
| Prop | Data type | Required? | Default | Description |
|---|---|---|---|---|
color |
primary | secondary | destructive | blue | red | purple | green | yellow |
No | secondary |
Renders a colored pill |
Pill types
You can assign a type to your pill to indicate what kind of information it conveys.
::: details Types
- Primary
- Secondary
- Destructive
:::
Primary
Primary pills convey positive information.
<fw-pill color="primary">
Primary pill
</fw-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. :::
<fw-pill>
Secondary pill
</fw-pill>
Destructive
Destructive pills convey destructive or negative information. Use these to indicate that information could cause issues such as data loss.
<fw-pill color="destructive">
Destructive pill
</fw-pill>
Pill colors
Funkwhale pills support a range of pastel colors to create visually appealing interfaces.
::: details Colors
- Red
- Blue
- Purple
- Green
- Yellow
:::
Blue
<fw-pill color="blue">
Blue pill
</fw-pill>
Red
<fw-pill color="red">
Red pill
</fw-pill>
Purple
<fw-pill color="purple">
Purple pill
</fw-pill>
Green
<fw-pill color="green">
Green pill
</fw-pill>
Yellow
<fw-pill color="yellow">
Yellow pill
</fw-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>.
<fw-pill>
<template #image>
<img src="/images/awesome-artist.png" />
</template>
Awesome artist
</fw-pill>