UNPKG

@shopify/polaris

Version:

Shopify’s product component library

github.com/Shopify/polaris

Shopify/polaris

161 lines (97 loc) • 3.15 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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
--- name: Toast category: Feedback indicators platforms: - android - ios keywords: - toast - flash message - snackbar - notification bar - temporary feedback - timed feedback - ios - android --- # Toast The toast component is a non-disruptive message that appears at the bottom of the interface to provide quick, at-a-glance feedback on the outcome of an action. --- ## Best practices - Avoid long texts inside of the toast. Maximum of 2 lines of text. - Don’t use Cancel / Dismiss action on the toast. It dismisses itself after 2 seconds. - Don't use more than 1 toast at the same time. Instead, queue them. - If the toast has an action, keep the action label short. Preferably 1 verb. --- ## Content guidelines Message should: - Short and affirmative <!-- usagelist --> #### Do - Product updated - Collection added - Customer updated - No internet connection #### Don’t - Your product has been successfully updated - We were unable to save the customer - Your Order was Archived Today - Discount: Saved successfully <!-- end --> Action should: - Keep the action label short. Preferably 1 verb - Not have actions for dismissing toast <!-- usagelist --> #### Do - Undo - Change - Edit - View - Retry #### Don’t - OK - Got it - Cancel product - Continue to collection - Dismiss <!-- end --> --- ## Examples ### Default toast Use default toast for informative and neutral feedback. <!-- content-for: android --> ![Default toast with neutral color](components/Toast/android/default.png) <!-- /content-for --> <!-- content-for: ios --> On iOS, icons are available for cases where you want to re-inforce the message. ![Default toast with neutral color](components/Toast/ios/default.png) <!-- /content-for --> ### Success toast Use success toast to indicate that something was successful. For example, a product was successfully updated. <!-- content-for: android --> ![Success toast](components/Toast/android/success.png) <!-- /content-for --> <!-- content-for: ios --> On iOS, icons are available for cases where you want to re-inforce the message. ![Success toast](components/Toast/ios/success.png) <!-- /content-for --> ### Error Use error toast to indicate that something failed. For example, your phone is offline and need to reconnect to the internet. <!-- content-for: android --> ![Error toast](components/Toast/android/error.png) <!-- /content-for --> <!-- content-for: ios --> On iOS, icons are available for cases where you want to re-inforce the message. ![Error toast](components/Toast/ios/error.png) <!-- /content-for --> ### With action Use action when you have the ability to act on the message. For example, undo changes, or edit message. <!-- content-for: android --> ![Default toast with action to undo](components/Toast/android/default-action.png) <!-- /content-for --> <!-- content-for: ios --> ![Default toast with action to undo](components/Toast/ios/default-action.png) <!-- /content-for --> --- ## Related component - Complex feedback that requires reading and understanding, instead [use Banner](/components/feedback-indicators/banner)