Pill Container
The Avonni Pill Container displays a horizontal row of customizable "pills" representing labels or icons, with options for styling and interaction.
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 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 to display in the pill.
URL — Address of the web page the pill label links to. When set, the pill becomes a clickable link.
Target — Where the URL opens: Self (default), Blank, Parent, or Top. Requires URL to be set.
Avatar — Avatar shown on the pill. Configure its Variant (Circle or Square), Initials, Icon Name, and Image Source.
Key Field — Unique identifier for each pill (defaults to the record Id). Used in output variables on interaction. Shown under advanced options.
Properties
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).
Alternative Text
Accessible text description of the pill container, read by assistive technologies.
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 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.
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.
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.
Controls the inner spacing between the component's content and its edges.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
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.
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.
Adjusts display when the Pill Container is opened as a modal dialog inside a Flow screen.
Width: Dialog width.
Height: Dialog height.
Background Color: Dialog background color.
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.
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.
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.
Controls the overflow dropdown that holds extra pills.
Width / Max Height: Set the dropdown's dimensions.
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.
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.
Item Action Click
When a user clicks a per-pill action button.
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).
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
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 or Open Flow Panel interaction can fill with values from a launched flow. See Flow Interaction Output Variables.
Last updated
Was this helpful?