New image

LIBRARIES

Polaris Components FigMayo
👋 Getting started

components

Ctrl-K
Polaris Components FigMayo/Action List
Updated 18 December 2024
Action List
Component Preview

Tips

Sizing

Action List is set to fixed width and needs to be sized manually. Simply toggle your props, update labels and drag the width of the Action List to the desired width.

List items are set to fill content by default so states and suffix content are aligned properly.

Preview
Mike Miller
Updated 18 Dec 2024
Action List
View Figma
    PlaygroundUsageFigma

Number of items

Toggle up to 10 list items per Action List. If you need more than 10, you can detach the component.

Preview

Sections

Convert any list item into a Section title to organize items into a group using the ‘List item type’ property.

Use the ‘Is first item’ prop to create proper padding when the title is the first item in the Action List.

Preview

Destructive

Turn any list item into a destructive item using the ‘List item type’ property. These are typically the last item in the list.

Preview

Prefix

Add content before the label. This is typically an icon. All list items should have a prefix if using this property.

Preview

Suffix

Add content after the label. This is most commonly Checkmark icon used to indicate an active/selected state.

Preview

Help text

Additional hint text to display with item.

Preview
Mike Miller
Updated 18 Dec 2024
Section(2 variants)
View Figma