UNPKG

@shopify/polaris

Version:

Shopify’s product component library

github.com/Shopify/polaris

Shopify/polaris

119 lines (82 loc) • 2.7 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
--- name: Page actions category: Structure keywords: - PageActions - bottom of page actions - bottom page actions - primary action - primary page actions - default page actions - save delete actions - save actions - delete actions --- # Page actions Page actions let merchants take key actions at the bottom of specific pages in the interface. This is important because sometimes the primary call to action is hard to access when merchants are at the bottom of a page. --- ## Purpose Put the merchant first by identifying the problem they face and the component that helps them solve it. ### Problem Merchants need to be able to take important page actions, even after they’ve scrolled to the bottom of the page. ### Solution Page actions show at the bottom of pages so that merchants don’t need to scroll up to take important actions. --- ## Best practices Page actions should: - Include a single primary action on the right. It should be the same as the primary action that shows in the title bar at the top of the page. - Include a maximum of two secondary actions, but doesn’t have to include any secondary actions. --- ## Content guidelines ### Call to action buttons Buttons should be: - Clear and predictable: merchants should be able to anticipate what will happen when they click a button. Never deceive a merchant by mislabeling a button. <!-- usagelist --> #### Do - Create order - Buy shipping label #### Don’t - New order - Buy <!-- end --> - Action-led: buttons should always lead with a strong verb that encourages action. To provide enough context to merchants use the {verb}+{noun} format on buttons except in the case of common actions like Save, Close, Cancel, or OK. <!-- usagelist --> #### Do - Activate Apple Pay - View shipping settings #### Don’t - Try Apple Pay - View your settings <!-- end --> - Scannable: avoid unnecessary words and articles such as the, an, or a. <!-- usagelist --> #### Do Add menu item #### Don’t Add a menu item <!-- end --> ## Examples ### Default page actions Used on a resource page (e.g. individual order or product page) to let merchants take key actions at the bottom of the page. Usually, the primary action is Save and the secondary action is Delete. ```jsx <PageActions primaryAction={{ content: 'Save', }} secondaryActions={[{ content: 'Delete', }]} /> ``` ### Primary action only Not all page actions require a secondary action. ```jsx <PageActions primaryAction={{ content: 'Save', }} /> ``` --- ## Related components * To create a regular call to action, [use the button component](/components/actions/button) to expand content in place in the page