```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 `` tags. Alternatively, you can set `v-model` and [make the pill editable](#editable-pill). | 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 Primary 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. ::: ```vue-html Secondary pill ``` Secondary pill ### Destructive Destructive pills convey **destructive** or **negative** information. Use these to indicate that information could cause issues such as data loss. ```vue-html Destructive pill ``` Destructive pill ## Pill colors Funkwhale pills support a range of pastel colors to create visually appealing interfaces. ### Blue ```vue-html Blue pill ``` Blue pill ### Red ```vue-html Red pill ``` Red pill ### Purple ```vue-html Purple pill ``` Purple pill ### Green ```vue-html Green pill ``` Green pill ### Yellow ```vue-html Yellow 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 `