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.

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.

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>