> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/pill-container.md).

# Pill Container

<figure><img src="/files/Zpccih3BtICHDWnZtcCg" alt="" width="375"><figcaption></figcaption></figure>

The Pill Container displays a collection of pills — small labeled tags that can represent selected items, filters, or categories. It supports collapsible display, single-line mode, sortable drag-and-drop reordering, and per-pill action buttons.

***

## Overview

Use the Pill Container to show a user's selected items, active filters, or tagged values in a compact, scannable row. Pills can be reordered by drag-and-drop when **Sortable** is enabled, and each pill can carry action buttons (such as a remove button) for inline management.

***

## Configuration

To configure it, click the component on the Flow screen. The Edit Pill Container Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

### Data Source

The **Data Source** setting determines where the pills come from.

| Data Source                                                      | Best For                              |
| ---------------------------------------------------------------- | ------------------------------------- |
| [**Manual**](/flow/component-builder/data-sources/manual.md)     | Fixed, pre-defined pills              |
| [**Variable**](/flow/component-builder/data-sources/variable.md) | Pills from a Flow collection variable |
| [**Query**](/flow/component-builder/data-sources/query.md)       | Live Salesforce records               |

### Data Mapping

When using Variable or Query, configure **Data Mappings** in the Properties tab to tell the component how to build each pill from your data:

* **Label** — Text displayed on the pill.
* **Name** — Unique identifier for the pill; used in output variables on interaction.
* **Href** — URL that makes the pill a clickable link.
* **Target** — Link target (`_self` or `_blank`).
* **Avatar** — Avatar object for an icon or image on the pill.

### Properties

| Setting            | What It Does                                                                                                                               |
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
| **Single Line**    | Limits pills to a single line. When enabled, this overrides **Is Collapsible** and **Is Expanded**.                                        |
| **Is Collapsible** | When enabled, the pill list can be collapsed when it overflows the available space. Use with **Is Expanded** to control the default state. |
| **Is Expanded**    | When enabled alongside **Is Collapsible**, the pill list starts in expanded mode. Ignored when **Is Collapsible** is off.                  |
| **Sortable**       | When enabled, pills can be reordered by dragging and dropping, or via keyboard (spacebar to grab, arrow keys to move).                     |

<figure><img src="/files/1gyrbroa5Bs1Qv5rvLWp" alt=""><figcaption></figcaption></figure>

### Actions

The **Actions** group lets you define buttons that appear to the right of each pill. Each action requires a **Label** and a **Name** (used to identify which action was clicked in the output variables). You can also set an **Icon** and mark the action as **Disabled**.

## Interactions

[Interactions](/flow/component-builder/interactions-panel.md) define what happens when users interact with the Pill Container. Configure them from the **Interactions** tab of the Edit Pill Container panel.

### Item Click

Fires when a user clicks a pill. Use this to navigate to a detail screen or display information about the selected item.

### Action Click

Fires when a user clicks a per-pill action button. The `targetName` output variable identifies which action was clicked, so you can filter interactions by a specific action name (for example, "Remove" or "Edit").

### Reorder

Fires when the user drags pills into a new order. Use this to persist the updated sequence or update a sort-order field.

***

## Styling

The **Style** tab gives you fine-grained control over the Pill Container's appearance. Configure it from the **Style** tab of the Edit Pill Container panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component, creating space between it and other elements on the screen.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its edges.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the component's dimensions.

* **Width / Height:** Set fixed dimensions.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the component.

* **Color:** Set the border color.
* **Size:** Adjust the border thickness.
* **Style:** Choose a border style (e.g. solid, dashed, dotted).
* **Radius:** Control the roundness of the corners.
  {% endtab %}

{% tab title="Spacing" %}
Controls the spacing around individual pills and the pill container box.

* **Pill Block Start / End / Inline Start / End:** Adjust the spacing around each pill.
* **Pill Container Block Start / End / Inline Start / End:** Adjust the spacing around the container box.
  {% endtab %}

{% tab title="Pill" %}
Styles the appearance of individual pills.

* **Background Color / Background Color Hover:** Set the pill background in each state.
* **Text Color / Text Color Hover:** Set the pill text color in each state.
* **Border Color / Border Color Focus / Border Color Hover / Border Size / Border Style / Border Radius:** Customize the pill border.
* **Shadow / Shadow Focus:** Set the pill shadow in each state.
  {% endtab %}

{% tab title="Pill Container" %}
Styles the container box (shown when **Single Line** is enabled).

* **Background Color:** Set the container background color.
* **Border Color / Border Radius:** Customize the container border.
  {% endtab %}

{% tab title="More Dropdown" %}
Controls the overflow dropdown that holds extra pills.

* **Width / Max Height:** Set the dropdown's dimensions.
  {% endtab %}
  {% endtabs %}

***

## Output Variables

The Pill Container exposes these output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Pill Container component, and pick the output variable you need.

### Item Click

When a user clicks a pill.

| Output variable       | Type             | What it returns                              |
| --------------------- | ---------------- | -------------------------------------------- |
| **Clicked Item**      | Record (SObject) | The record behind the pill the user clicked. |
| **Clicked Item Name** | Text (String)    | The name (key) of the clicked pill.          |

> **Example:** Use **Clicked Item** to navigate to a detail screen when a user clicks on a tag or filter pill.

### Action Click

When a user clicks a per-pill action button.

| Output variable                   | Type             | What it returns                                      |
| --------------------------------- | ---------------- | ---------------------------------------------------- |
| **Clicked Item Action Item**      | Record (SObject) | The record behind the pill whose action was clicked. |
| **Clicked Item Action Item Name** | Text (String)    | The name (key) of the pill whose action was clicked. |
| **Clicked Item Action Name**      | Text (String)    | The name of the action button that was clicked.      |

> **Example:** A user clicks "Remove" on a filter pill. Use a **Decision** element to check if **Clicked Item Action Name** equals "Remove", then update the filter collection accordingly.

### Reorder

When a user drags pills into a new order (requires **Sortable** to be enabled).

| Output variable                    | Type                               | What it returns                                   |
| ---------------------------------- | ---------------------------------- | ------------------------------------------------- |
| **Sorted Items**                   | Collection of Pill Container Items | The full reordered list of pills as Apex objects. |
| **Sorted Items SObject**           | Record Collection                  | The reordered pills as SObject records.           |
| **Sorted Items String Collection** | Text Collection                    | The names of the reordered pills, in order.       |
| **Sorted Items Serialized**        | Text (String)                      | The reordered list serialized as a JSON string.   |

> **Example:** After the user reorders priority tags by dragging, pass **Sorted Items SObject** into an **Update Records** element to save the new priority order.

### Others

| Output variable     | Type    | What it returns                                              |
| ------------------- | ------- | ------------------------------------------------------------ |
| **Number of Items** | Integer | The total number of pills currently loaded in the container. |

### Flow Interaction Output Variables

Like all interactive Flow components, the Pill Container exposes generic output slots (Variable 1–10) that an [Open Flow Dialog](/flow/component-builder/interactions-panel/open-flow-dialog.md) or [Open Flow Panel](/flow/component-builder/interactions-panel/open-flow-panel.md) interaction can fill with values from a launched flow. See [Flow Interaction Output Variables](/flow/component-builder/interactions-panel/flow-interaction-output-variables.md).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/pill-container.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.