---
title: "pill"
description: "Overview"
permalink: /docs/build/ui-components/all-ui-components/list/list-item/pills/pill/
---
# pill

## Overview

See the below:

- [[](/docs/build/ui components/all ui components/list/list item/pills/)](https://docs.journeyapps.com/docs/build/ui-components/all-ui-components/list/list-item/pills/)

## Standard Attributes

### `label`

<SyntaxCard type={"string (static text, format string, or JS/TS function result)"} defaultValue={"none"} required />

**Shorthand supported?** `false`

The text that is displayed inside the pill.

```xml
<list>
    <list-item query="projects">
        <pills>
            <pill label="{duration}" />
        </pills>
    </list-item>
</list>
```

## Advanced Attributes

### `color`

<SyntaxCard type={"string (named color or #HEX value)"} defaultValue={"primary"} />

**Shorthand supported?** `false`

The background color of the pill.

```xml
<list>
    <list-item query="projects">
        <pills>
            <pill label="Status" color="$:getStatusColor($object)" />
        </pills>
    </list-item>
</list>
```

### `show-if`

<AttributeReference label="show-if" href="/docs/build/ui-components/common-attributes/show-if/" badge="advanced" tone="muted" />

### `hide-if`

<AttributeReference label="hide-if" href="/docs/build/ui-components/common-attributes/hide-if/" badge="advanced" tone="muted" />