Comment on page
A pill represents an object that can be viewed with or without an icon.
The Pill Container component typically consists of a horizontal row of items or options, each represented by a small, rounded rectangle, or "pill," that displays a label or icon. The pills may be formatted in various ways, such as using different colors or font sizes, to help them stand out and convey the desired message or concept.
The Pill Container component may include features such as moving pills. You can also customize the appearance and functionality of the container by using the available formatting and customization options.
Works on Desktop and Mobile
is-collapsibleis checked, the pill list can be collapsed if more pills are available to fit the space available. With the
is-expandedattribute to expand and collapse the list of pills.
Pills can be sortable by checking the
Sortableproperty. End-users can use their mouse to move pills.
Using the Data Source section, adding pills to the pill container component is possible. Pills can be added using:
Manual: Pills values can be added manually. You can add as many pills as you want as long you are defining a label.
Variable: Pills can be added dynamically by linking them to a source collection from your flow.
Here are the available interactions for the Pill Container component:
Change: The event is fired when the value changes when using the sortable property.
From the Styles panel, you can customize styling attributes for the Pill Container component:
Spacing: to customize the label that is displayed on top of the data.
Pill: to customize the style of the pill.
Pill Container: to customize the style of the pill container box if the single line property is checked.
Last modified 16d ago