Action container | Parsley Design System

Examples

Default Button Set

Used for the F-pattern style reading, the default button set has one primary button and one or two secondary and/or tertiary buttons. See the Button pattern for details of when to use the secondary and tertiary styles.

One Button

For one button the primary button variation should be used.

Code

1<ActionContainer>
2    <Button variation="primary" onClick={() => {}}>Submit</Button>
3</ActionContainer>

Two Buttons

For two buttons a primary and a secondary button is the recommended usage, the secondary button is output first. The primary action should always be output last, this allows users to see/hear the non committal action first and it also positions the primary action closest to the users thumb in mobile devices.

Code

1<ActionContainer>
2    <Button variation="secondary" onClick={() => {}}>Cancel</Button>
3    <Button variation="primary" onClick={() => {}}>Submit</Button>
4</ActionContainer>

Two Buttons - Equal actions

For content where two actions of equal weighting are required then the recommended usage is for these buttons to both be styled as secondary actions

Code

1<ActionContainer>
2    <Button variation="secondary" onClick={() => {}}>Cancel</Button>
3    <Button variation="secondary" onClick={() => {}}>Submit</Button>
4</ActionContainer>

Three Buttons

For three buttons a primary, a secondary and a tertiary button are the recommended usage, the order should proceed from least important to most important.

Code

1<ActionContainer>
2    <Button variation="tertiary" onClick={() => {}}>Cancel</Button>
3    <Button variation="secondary" onClick={() => {}}>Save</Button>
4    <Button variation="primary" onClick={() => {}}>Submit</Button>
5</ActionContainer>

Modal Button Set Examples

Used for the Z-pattern style reading, the default modal button set has one primary button and one or two secondary and/or tertiary buttons. See the Button pattern for details of when to use the secondary and tertiary styles.

One Button

For one button the primary button variation should be used.

Code

1<ModalFooter>
2    <ModalClose>
3        <Button variation="primary">Done</Button>
4    </ModalClose>
5</ModalFooter>

Two Buttons

For two buttons a primary and a secondary button is the recommended usage, the secondary button is output first. The primary action should always be output last, this allows users to see/hear the non committal action first and it also positions the primary action closest to the users thumb in mobile devices.

Code

1<ModalFooter>
2    <ModalClose>
3        <Button variation="secondary">Cancel</Button>
4    </ModalClose>
5    <Button variation="primary" onClick={() => {}}>Submit</Button>
6</ModalFooter>

Two Buttons - Equal actions

For content where two actions of equal weighting are required then the recommended usage is for these buttons to both be styled as secondary actions

Code

1<ModalFooter>
2    <ModalClose>
3        <Button variation="secondary">Cancel</Button>
4    </ModalClose>
5    <Button variation="primary" onClick={() => {}}>Submit</Button>
6</ModalFooter>

Three Buttons

For three buttons a primary, a secondary and a tertiary button are the recommended usage, the order should proceed from least important to most important.

Code

1<ModalFooter>
2    <ModalClose>
3        <Button variation="tertiary">Cancel</Button>
4    </ModalClose>
5    <Button variation="secondary" onClick={() => {}}>Save</Button>
6    <Button variation="primary" onClick={() => {}}>Submit</Button>
7</ModalFooter>

Wizard button set

Used for a specific version of the Z-pattern style of reading, where the customer is likely to want to move to and fro through a wizard. The default wizard button set has one primary button on the right and one or two secondary and/or tertiary buttons on the left. See the Button pattern for details of when to use the secondary and tertiary styles.

One Button

For one button the primary button variation should be used.

Code

1<ActionContainer patternType="z">
2    <Button variation="primary" onClick={() => {}}>Submit</Button>
3</ActionContainer>

Two Buttons

For two buttons a primary and a secondary button is the recommended usage, the secondary button is output first. The primary action should always be output last, this allows users to see/hear the non committal action first and it also positions the primary action closest to the users thumb in mobile devices.

Code

1<ActionContainer patternType="z">
2    <Button variation="secondary" onClick={() => {}}>Cancel</Button>
3    <Button variation="primary" onClick={() => {}}>Submit</Button>
4</ActionContainer>

Two Buttons - Equal actions

For content where two actions of equal weighting are required then the recommended usage is for these buttons to both be styled as secondary actions

Code

1<ActionContainer patternType="z">
2    <Button variation="secondary" onClick={() => {}}>Cancel</Button>
3    <Button variation="secondary" onClick={() => {}}>Submit</Button>
4</ActionContainer>

Three Buttons

For three buttons a primary, a secondary and a tertiary button are the recommended usage, the order should proceed from least important to most important.

Code

1<ActionContainer patternType="z">
2    <Button variation="tertiary" onClick={() => {}}>Cancel</Button>
3    <Button variation="secondary" onClick={() => {}}>Save</Button>
4    <Button variation="primary" onClick={() => {}}>Submit</Button>
5</ActionContainer>

Design

Action Container sets allow designers and developers to ensure that buttons are aligned and spaced consistently. This consistent placement and spacing makes it easier and quicker for customers to successfully progress through forms with confidence.

Problem

As a customer, I want to quickly and easily progress through forms. I want to easily find the buttons and feel confident that I have clicked on the correct button. As a customer, I typically exhibit 2 main styles of reading, the F-pattern and the Z-pattern.
As a designer, I want to design forms which support my customers’ natural way of reading and ensure that the buttons to progress the customer through their journeys are easily found.

F Pattern Reading

For standard pages or forms, customers start in the top left, read across to the right, then return to the left-hand side and progress down to the next line/item, before heading off to the right again. This is referred to as the F-pattern of reading.

Z Pattern Reading

For restricted content sizes, such as cards or modals, customers tend to exhibit a Z-pattern style of reading.

Solution

Present the customer with a consistent set of buttons which support the relevant style of reading.
For the F-pattern style of reading, left aligned button sets, with the most important button on the left, placed directly after the last form element are the most effective.
For the Z-pattern style of reading, the primary action button should be on the far right, with the secondary button directly to the left, except where the customers would typically navigate to and fro frequently, such as a wizard, when the secondary button should be on the far left.

Development

Import by:

1import { ActionContainer } from '@parsley_design_systems/design-system'

Available props

Props for the ActionContainer component
Property	Type	Default	Required	Description
children	ReactNode		true	The actions to display in the Action Container.
patternType	boolean	f	false	A boolean that sets the pattern type. "f" pattern type is the default when unset.