You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
2. To communicate feedback in response to a user action.
28
30
29
31
### Best practices
32
+
30
33
Use banners sparingly and only when necessary. Banners can disrupt the user experience and should only be used when and where relevant.
31
34
32
35
Keep the message concise and direct. Don't use heading styling or multiple type sizes in banners, rely on the default paragraph size and use the title when appropriate.
@@ -35,30 +38,32 @@ Don't show more than one banner at a time. For more information, see this articl
35
38
36
39
## Anatomy
37
40
38
-
<img
41
+
<FigmaImage
39
42
width="960"
40
43
alt="Anatomy of a banner, including the message, title, icon, dismiss button, primary, and secondary action"
Use critical banners to signal critical errors, system failures, or necessary destructive actions. Examples: form validation error summary, repo deletion confirmations.
57
-
<img
58
-
width="456"
59
-
alt="Text within a box that has a light red outline and a lighter red background. There is a vibrant red stop icon with an exclamation point inside that comes before the text within the banner."
alt="Text within a box that has a light red outline and a lighter red background. There is a vibrant red stop icon with an exclamation point inside that comes before the text within the banner."
Use warning banners to alert users about potential issues or impactful changes. For example possible connectivity concerns or hidden items due to active filters.
74
-
<img
75
-
width="456"
76
-
alt="Text within a box that has a yellow outline and a lighter yellow background. There is a dark yellow triangle icon with an exclamation point inside that comes before the text within the banner."
Use warning banners to alert users about potential issues or impactful changes. For example possible connectivity
79
+
concerns or hidden items due to active filters.
80
+
<img
81
+
width="456"
82
+
alt="Text within a box that has a yellow outline and a lighter yellow background. There is a dark yellow triangle icon with an exclamation point inside that comes before the text within the banner."
Use success banners to indicate task completion or successful actions. For example, a successful issue transfer when the user is not brought to the new page. Only use success messages if the success is not easily apparent in the UI.
91
-
<img
92
-
width="456"
93
-
alt="Text within a box that has a green outline and a lighter green background. There is a vibrant green circle icon with a check icon inside the circle that comes before the text within the banner."
Use success banners to indicate task completion or successful actions. For example, a successful issue transfer when
97
+
the user is not brought to the new page. Only use success messages if the success is not easily apparent in the UI.
98
+
<img
99
+
width="456"
100
+
alt="Text within a box that has a green outline and a lighter green background. There is a vibrant green circle icon with a check icon inside the circle that comes before the text within the banner."
Use info banners to inform about non-critical context and information. For example feature prompts or ongoing processes.
108
-
<img
109
-
width="456"
110
-
alt="Text within a box that has a light blue outline and a lighter blue background. There is a vibrant blue circle icon with the letter i inside that comes before the text within the banner."
Use info banners to inform about non-critical context and information. For example feature prompts or ongoing
115
+
processes.
116
+
<img
117
+
width="456"
118
+
alt="Text within a box that has a light blue outline and a lighter blue background. There is a vibrant blue circle icon with the letter i inside that comes before the text within the banner."
@@ -143,11 +150,11 @@ Use upsell banners to inform the users about a feature that can be enabled by up
143
150
>
144
151
<div>
145
152
146
-
Use a title to concisely present the topic of the banner when the message of the banner is complex and too long to scan.
153
+
Use a title to concisely present the topic of the banner when the message of the banner is complex and too long to scan.
147
154
148
-
A title is required and will be used as a semantic page heading. However, you can visually hide the title. It is recommended to hide the title if the body of the banner is short and easily scannable.
155
+
A title is required and will be used as a semantic page heading. However, you can visually hide the title. It is recommended to hide the title if the body of the banner is short and easily scannable.
149
156
150
-
Use the built-in accessibility annotations in the Figma components to define the heading level and text relevant to its context.
157
+
Use the built-in accessibility annotations in the Figma components to define the heading level and text relevant to its context.
151
158
152
159
</div>
153
160
<img
@@ -176,8 +183,14 @@ Banners with an `onDismiss` property automatically show a dismiss button. This s
176
183
Use the following as a guideline:
177
184
178
185
<ul>
179
-
<li>If you're on a page in which you can do other tasks, and the banner is not blocking / does not have to be addressed, then you should be able to have a close button.</li>
180
-
<li>If accidental closure of the banner would leave the user confused or missing something critical, it should not have a close button.</li>
186
+
<li>
187
+
If you're on a page in which you can do other tasks, and the banner is not blocking / does not have to be addressed,
188
+
then you should be able to have a close button.
189
+
</li>
190
+
<li>
191
+
If accidental closure of the banner would leave the user confused or missing something critical, it should not have
192
+
a close button.
193
+
</li>
181
194
</ul>
182
195
183
196
</div>
@@ -200,9 +213,9 @@ Use the following as a guideline:
200
213
>
201
214
<div>
202
215
203
-
Critical banners can't be dismissable. They are mostly used for errors which need to be resolved. As a result you can only get rid of a critical banner by resolving the error. If used to warn about destructive actions, the banner should also not be dismissable.
216
+
Critical banners can't be dismissable. They are mostly used for errors which need to be resolved. As a result you can only get rid of a critical banner by resolving the error. If used to warn about destructive actions, the banner should also not be dismissable.
204
217
205
-
If the error must be resolved on a different page, use an action that directs the user to the page where the error can be resolved.
218
+
If the error must be resolved on a different page, use an action that directs the user to the page where the error can be resolved.
206
219
207
220
</div>
208
221
@@ -225,11 +238,11 @@ Use the following as a guideline:
225
238
>
226
239
<div>
227
240
228
-
A maximum of 2 actions can be added to a banner. Whenever possible it is recommended to only add a single action to better direct the users attention.
241
+
A maximum of 2 actions can be added to a banner. Whenever possible it is recommended to only add a single action to better direct the users attention.
229
242
230
-
For banners with a single action, you can choose between adding a primary or secondary action depending on how much attention you want to draw to the action.
243
+
For banners with a single action, you can choose between adding a primary or secondary action depending on how much attention you want to draw to the action.
231
244
232
-
For banners with two actions, one of them must be primary and the other must be secondary. In this case, use the primary action for the recommended action. For example, the primary action enables a feature and the secondary action links more information.
245
+
For banners with two actions, one of them must be primary and the other must be secondary. In this case, use the primary action for the recommended action. For example, the primary action enables a feature and the secondary action links more information.
233
246
234
247
</div>
235
248
<img
@@ -251,21 +264,17 @@ Use the following as a guideline:
251
264
252
265
The icon relates to the selected [variant](#variant) and can't be disabled. It can only be changed for banners of variant `info` or `upsell`.
253
266
254
-
<img
255
-
width="456"
256
-
alt="Three banners with leading icons. Success banner has its standard circle and check icon, upsell banner has a custom computer icon, and the info banner has a custom shield icon with a keyhole inside of the lock."
alt="Three banners with leading icons. Success banner has its standard circle and check icon, upsell banner has a custom computer icon, and the info banner has a custom shield icon with a keyhole inside of the lock."
The internal banner layout changes for large banners depending on its content.
271
280
@@ -275,6 +284,7 @@ The internal banner layout changes for large banners depending on its content.
275
284
4. A banner with a title, a dismiss button and one or two actions has the dismiss button aligned to the top right corner and the actions below the content aligned to the left
276
285
277
286
### Responsive Design
287
+
278
288
<img
279
289
width="960"
280
290
alt="One banner at full width, with all of the content in one row, the second banner is shrunk to a smaller width, the icon, wrapped text, and dismiss button all in one row, with the action item in the second row."
@@ -284,6 +294,7 @@ The internal banner layout changes for large banners depending on its content.
284
294
On large screens the layout of the elements within the banner adjust depending on which elements are enabled. On small screens the banner always uses the stacked layout.
285
295
286
296
### Position
297
+
287
298
A banner should always be positioned as close to the section it relates to as possible.
288
299
289
300
If a banner informs about something that relates to the current page, it should be placed above the pages headline. However, if the banner is only relevant to a portion of the page place it above the section it relates to.
@@ -298,8 +309,8 @@ Banners that are used to communicate feedback require extra accessibility consid
298
309
299
310
Consider using either a **live region announcement** or **focus management** technique:
300
311
301
-
***Live region announcements**: can be used to announce the new content to screen reader users. This is the preferred method for non-critical information (**though exceptions apply**, such in scenarios where focus loss needs to be handled).
302
-
***Focus management**: involves shifting a user's focus directly the new Banner. This method is disruptive when used inappropriately, but is extremely helpful in scenarios where we need to guide the user towards an action.
312
+
-**Live region announcements**: can be used to announce the new content to screen reader users. This is the preferred method for non-critical information (**though exceptions apply**, such in scenarios where focus loss needs to be handled).
313
+
-**Focus management**: involves shifting a user's focus directly the new Banner. This method is disruptive when used inappropriately, but is extremely helpful in scenarios where we need to guide the user towards an action.
303
314
304
315
Here are some questions to consider when deciding which method to use:
305
316
@@ -328,6 +339,7 @@ If the Banner appears as part of the new content on the page after a user experi
328
339
Many scenarios are nuanced, and can be tricky to figure out the appropriate path forward for. These benefit from additional feedback from assistive technology users.
329
340
330
341
If you're unsure about which technique is appropriate for your usecase, please reach out to the Accessibility team who can help find a path forward.
342
+
331
343
### Known accessibility issues (GitHub staff only)
0 commit comments