@@ -76,17 +76,17 @@ with users, they are disruptive and should be used sparingly.
7676
7777For more context on when to use each notification variant, including modals,
7878refer to the [ notifications pattern] ( /patterns/notification-pattern/ ) . Carbon
79- only supports inline, toast, actionable, and modal notification variants,
79+ supports only inline, toast, actionable, and modal notification variants,
8080although some product teams also support banners and notification centers.
8181
8282### Variants
8383
84- | Variant | Purpose |
85- | ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
86- | [ Inline] ( #inline ) | Inline notifications show up in task flows, to notify users of the status of an action. They usually appear at the top of the primary content area. |
87- | [ Toast] ( #toast ) | Toasts are non-modal, time-based window elements used to display short messages; they usually appear at the top of the screen and disappear after a few seconds. |
88- | [ Actionable] ( #actionable ) | Actionable notifications allow for interactive elements within a notification styled like an inline or toast notification. |
89- | [ Callout] ( #callout ) | Callouts are used to highlight important information that loads with the contents of the page, is placed contextually, and cannot be dismissed. |
84+ | Variant | Purpose |
85+ | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
86+ | [ Inline] ( #inline ) | Inline notifications show up in task flows, to notify users of the status of an action. They usually appear at the top of the primary content area. |
87+ | [ Toast] ( #toast ) | Toast notifications are non-modal, time-based window elements used to display short messages; they usually appear at the top of the screen and disappear after a few seconds. |
88+ | [ Actionable] ( #actionable ) | Actionable notifications allow for interactive elements within a notification styled like an inline or toast notification. |
89+ | [ Callout] ( #callout ) | Callouts are used to highlight important information that loads with the contents of the page, is placed contextually, and cannot be dismissed. |
9090
9191### Feature flags
9292
@@ -171,27 +171,33 @@ take action and, therefore, does not include success or error statuses.
171171
172172## Content
173173
174- Notifications provide limited space for content, and therefore the content must
175- be short and concise. A user should be able to quickly scan the notification, be
176- apprised of the situation, and know what to do next.
174+ Notifications provide limited space for content and, therefore, the content must
175+ be short and concise. Follow the guidance in
176+ [ IBM Style - Messages] ( https://ibmdocs-test.dcs.ibm.com/docs/en/ibm-style?topic=format-messages )
177+ and write the message so the user can, by scanning the notification, be apprised
178+ of the situation and quickly know what to do next.
177179
178180### Main elements
179181
180182#### Title
181183
182184- The title should be short and descriptive, explaining the most important piece
183- of information.
185+ of information. For error messages, tell users what stopped or can't be done
186+ in the title, for example “Server instance unavailable”.
184187- Don't use a period to end a title.
185188- When using rich text, such as in a title, a screen reader will read aloud the
186- entire message as one sentence. Since the message will be read as one string,
187- do not depend on text styling to convey meaning.
189+ entire message as one sentence. Because the message will be read as one
190+ string, do not depend on text styling to convey meaning.
188191
189192#### Body content
190193
191- - Be concise and avoid repeating or paraphrasing the title .
192- - Limit content to one or two short sentences .
194+ - Be concise; limit the content to one or two short sentences .
195+ - Don't repeat or paraphrase the title .
193196- Explain how to resolve the issue by including any troubleshooting actions or
194- next steps.
197+ next steps. This is what IBM Style calls the “user action”. User actions are
198+ mandatory for error messages.
199+ - When possible, use an actionable notification and include links in the
200+ notification body that redirect the user to where they resolve the problem.
195201
196202#### Action button
197203
@@ -208,10 +214,10 @@ apprised of the situation, and know what to do next.
208214
209215### Overflow
210216
211- If a toast or inline notification requires a message longer than two lines, use
217+ If a toast or inline notification requires a message that is longer than two lines, use
212218an actionable notification and include a short message with a “View more” link
213- that takes the user to a view of the full notification message. This can be
214- either a full page with more details or a modal.
219+ that takes the user to a view of the full notification message. This destination
220+ can be either a full page with more details or a modal.
215221
216222### Further guidance
217223
@@ -220,9 +226,9 @@ For further content guidance, see Carbon's
220226
221227## Inline
222228
223- Inline notifications show up in task flows, to notify users of the status of an
224- action or system. They usually appear at the top of the primary content area or
225- close to the item needing attention.
229+ Inline notifications show up in task flows to notify users of the status of an
230+ action or system. Inline notifications usually appear at the top of the primary
231+ content area or close to the item needing attention.
226232
227233### Inline formatting
228234
@@ -246,9 +252,9 @@ Inline notifications appear near their related items. They can expand to fill
246252the width of the container or content area they are in and should align to the
247253grid columns.
248254
249- We recommend placing inline notifications at the bottom of forms, just above the
250- submission and cancel buttons. When error notifications apply to individual text
251- inputs, they should supplement the error state on that specific input field.
255+ Place inline notifications at the bottom of forms, just above the submission and
256+ cancel buttons. When error notifications apply to individual text inputs, they
257+ should supplement the error state on that specific input field.
252258
253259<Row >
254260<Column colLg = { 8 } >
@@ -273,8 +279,9 @@ critical for a user to read or interact with the notification.
273279
274280## Toast
275281
276- Toasts are non-modal, time-based window elements used to display short messages;
277- they usually appear at the top of the screen and disappear after a few seconds.
282+ Toast notifications are non-modal, time-based window elements used to display
283+ short messages; they usually appear at the top of the screen and disappear after
284+ a few seconds.
278285
279286### Toast formatting
280287
@@ -290,9 +297,10 @@ they usually appear at the top of the screen and disappear after a few seconds.
290297
291298Toast notifications can include a time stamp at the bottom the container. The
292299time stamp shows the time the notification was sent. Using time stamps is
293- optional but toasts should be consistent across the product so either all toasts
294- should include time stamps or none of them should. The time stamp is optional
295- and can be removed if a third line of content is needed.
300+ optional but toast notifications should be consistent across the product so
301+ either all toast notifications should include time stamps or none of them
302+ should. The time stamp is optional and can be removed if a third line of content
303+ is needed.
296304
297305#### Sizing
298306
@@ -322,24 +330,25 @@ dismissed.
322330
323331### Dismissal
324332
325- Toast notifications persist by default. Toasts do have the option to timeout and
333+ Toast notifications persist by default, but they can timeout and be coded to
326334dismiss automatically after five seconds on the screen. They can also include a
327- close button so users can dismiss them sooner. Toasts cover content on the
328- screen so they should always be easily dismissed. Because toast notifications
329- can dismiss automatically, users should be able to access them elsewhere after
330- the toast disappears. This allows them to be accessible for users who need more
331- time reading the notification or who may want to refer back to the notification .
335+ close button so users can dismiss them sooner. Toast notifications cover content
336+ on the screen so they should always be easily dismissed. Because toast
337+ notifications can dismiss automatically, users should be able to access them
338+ elsewhere after the toast notification disappears if they need more time to read
339+ the notification or who want to refer to it later .
332340
333341## Actionable
334342
335- Actionable notifications allow for interactive elements within a notification
336- styled like an inline or toast notification. Actionable notifications, since
337- they require user interaction, take focus when triggered and can be highly
338- disruptive to screen readers and keyboard users. With actionable notifications,
339- only one action is allowed per notification. This action frequently takes users
340- to a flow or page related to the message, where they can resolve the
341- notification. Consider using a notification center where a user can revisit and
342- act on past notifications.
343+ Actionable notifications are inline or toast notifications that have interactive
344+ elements. Because actionable notifications require user interaction, actionable
345+ notifications come into focus when triggered and, therefore, they disrupt screen
346+ readers and keyboard users. Only one action is allowed for each notification,
347+ and this action frequently takes users to a flow or page related to the message
348+ where they can resolve the notification.
349+
350+ Consider using a notification center where a user can revisit and act on past
351+ notifications.
343352
344353### Formatting
345354
@@ -353,10 +362,10 @@ notification.
353362#### Toast
354363
355364Actionable toast notifications can include a tertiary button at the end of their
356- body content. This button should be short and navigate users to a page or modal
357- where they can take action to address the notification or find further
358- information. Because toast notifications automatically dismiss, it is important
359- that there are alternative routes to navigate to the link destination.
365+ body content. This button should be short and should take users to a page or
366+ modal where they can take action to address the notification or find further
367+ information. Because toast notifications automatically dismiss, ensure there are
368+ alternative routes to navigate to the link destination.
360369
361370<Row >
362371<Column colLg = { 8 } >
@@ -372,13 +381,13 @@ that there are alternative routes to navigate to the link destination.
372381
373382### Dismissal
374383
375- Actionable notifications persist by default until a user dismisses them. If
376- using inline styling, refer to [ inline notifications] ( #inline-notifications ) for
377- inline dismissal. If using toast styling for an actionable notification, then
378- the notification should remain on screen until the user dismisses it. With the
379- notification remaining open, the user has enough time to interact with the
380- button without the toast closing too soon. Refer to
381- [ toast notifications] ( #toast-notifications ) for further information .
384+ Actionable notifications persist until a user dismisses them. If you're using
385+ inline styling, refer to [ inline notifications] ( #inline-notifications ) for
386+ inline dismissal. If you're using toast-notification style for an actionable
387+ notification, the notification should remain on screen until the user dismisses
388+ it. Because the notification remains open, the user has enough time to interact
389+ with the button without the toast closing too soon. For more information, see
390+ [ toast notifications] ( #toast-notifications ) .
382391
383392### Links
384393
@@ -388,8 +397,8 @@ actionable notification can be used to redirect the user to next steps.
388397### Actions
389398
390399If needed, actionable notifications can include a ghost button for inline
391- notifications or a tertiary button for toasts . These action buttons enable users
392- to address the notification or navigate to a page for more details.
400+ notifications or a tertiary button for toast notifications . These action buttons
401+ enable users to address the notification or navigate to a page for more details.
393402
394403## Callout
395404
@@ -523,7 +532,7 @@ notifications are best for critical messaging while low-contrast notifications
523532are less visually disruptive for users.
524533
525534It's up to the product team to decide which notification style to use in their
526- product. Callouts, inline, and toast notifications can use different styles but
535+ product. Callouts, inline, and toast notifications can use different styles, but
527536you should never mix styles within each notification variant. When in doubt, use
528537low-contrast notifications.
529538
0 commit comments