text: (window.webpackJsonp=window.webpackJsonp||[]).push([[2171],{"013z":function(e,t,a){"use strict";var n=a("q1tI"),i=a.n(n),o=a("NmYn"),s=a.n(o),r=a("Wbzz"),c=a("Xrax"),l=a("a7k6"),b=a("TSYQ"),d=a.n(b),p=a("QH2O"),u=a("qKvR");var m=({title:e,tabs:t=[]})=>Object(u.b)("div",{className:d()(p.pageHeader,{[p.withTabs]:t.length})},Object(u.b)("div",{className:"bx--grid"},Object(u.b)("div",{className:"bx--row"},Object(u.b)("div",{className:"bx--col-lg-12"},Object(u.b)("h1",{id:"page-title",className:p.text},e))))),g=a("BAC9");var h=({relativePagePath:e,repository:t})=>{const{site:{siteMetadata:{repository:a}}}=Object(r.useStaticQuery)("1364590287"),{baseUrl:n,subDirectory:i,branch:o}=t||a,s=`${n}/edit/${o}${i}/src/pages${e}`;return n?Object(u.b)("div",{className:"bx--row "+g.row},Object(u.b)("div",{className:"bx--col"},Object(u.b)("a",{className:g.link,href:s},"Edit this page on GitHub"))):null},f=a("FCXl"),O=a("I8xM");class j extends i.a.Component{render(){const{tabs:e,slug:t}=this.props,a=t.split("/").filter(Boolean).slice(-1)[0],n=e.map(e=>{const n=s()(e,{lower:!0,strict:!0}),i=n===a,o=new RegExp(a+"/?(#.*)?$"),c=t.replace(o,n);return Object(u.b)("li",{key:e,className:d()({[O.selectedItem]:i},O.listItem)},Object(u.b)(r.Link,{className:O.link,to:""+c},e))});return Object(u.b)("div",{className:O.tabsContainer},Object(u.b)("div",{className:"bx--grid"},Object(u.b)("div",{className:"bx--row"},Object(u.b)("div",{className:"bx--col-lg-12 bx--col-no-gutter"},Object(u.b)("nav",null,Object(u.b)("ul",{className:O.list},n))))))}}var y=j,A=a("MjG9");t.a=({pageContext:e,children:t,location:a,Title:n})=>{const{frontmatter:i={},relativePagePath:o,titleType:b}=e,{tabs:d,title:p,theme:g,description:O,keywords:j}=i,{site:{pathPrefix:w}}=Object(r.useStaticQuery)("2456312558"),N=w?a.pathname.replace(w,""):a.pathname,x=d?N.split("/").filter(Boolean).slice(-1)[0]||s()(d[0],{lower:!0}):"";return Object(u.b)(l.a,{tabs:d,homepage:!1,theme:g,pageTitle:p,pageDescription:O,pageKeywords:j,titleType:b},Object(u.b)(m,{title:n?Object(u.b)(n,null):p,label:"label",tabs:d}),d&&Object(u.b)(y,{slug:N,tabs:d,currentTab:x}),Object(u.b)(A.a,{padded:!0},t,Object(u.b)(h,{relativePagePath:o})),Object(u.b)(f.a,{pageContext:e,location:a,slug:N,tabs:d,currentTab:x}),Object(u.b)(c.a,null))}},BAC9:function(e,t,a){e.exports={bxTextTruncateEnd:"EditLink-module--bx--text-truncate--end--2pqje",bxTextTruncateFront:"EditLink-module--bx--text-truncate--front--3_lIE",link:"EditLink-module--link--1qzW3",row:"EditLink-module--row--1B9Gk"}},DuB0:function(e,t,a){"use strict";a.r(t),a.d(t,"_frontmatter",(function(){return r})),a.d(t,"default",(function(){return y}));a("3bBZ"),a("q1tI");var n=a("7ljp"),i=a("013z");a("qKvR");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e}).apply(this,arguments)}function s(e,t){if(null==e)return{};var a,n,i=function(e,t){if(null==e)return{};var a,n,i={},o=Object.keys(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)a=o[n],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}const r={},c=e=>function(t){return console.warn("Component "+e+" was not imported, exported, or provided by MDXProvider as global scope"),Object(n.b)("div",t)},l=c("PageDescription"),b=c("AnchorLinks"),d=c("AnchorLink"),p=c("Row"),u=c("Column"),m=c("Caption"),g=c("Title"),h=c("DoDontRow"),f=c("DoDont"),O={_frontmatter:r},j=i.a;function y(e){let{components:t}=e,a=s(e,["components"]);return Object(n.b)(j,o({},O,a,{components:t,mdxType:"MDXLayout"}),Object(n.b)(l,{mdxType:"PageDescription"},Object(n.b)("p",null,"Notifications are an important method of communicating with users and providing\nfeedback. They range from granular, inline responses to user actions to\nsystem-wide messages.")),Object(n.b)(b,{mdxType:"AnchorLinks"},Object(n.b)(d,{mdxType:"AnchorLink"},"Overview"),Object(n.b)(d,{mdxType:"AnchorLink"},"Designing with notifications"),Object(n.b)(d,{mdxType:"AnchorLink"},"Notification status"),Object(n.b)(d,{mdxType:"AnchorLink"},"Notification types"),Object(n.b)(d,{mdxType:"AnchorLink"},"Considerations when designing"),Object(n.b)(d,{mdxType:"AnchorLink"},"Accessibility"),Object(n.b)(d,{mdxType:"AnchorLink"},"Related components and patterns"),Object(n.b)(d,{mdxType:"AnchorLink"},"References"),Object(n.b)(d,{mdxType:"AnchorLink"},"Feedback")),Object(n.b)("h2",null,"Overview"),Object(n.b)("p",null,"It’s important to keep users informed and send notifications when there is an\nupdate or status change they should be aware of. Users should always be given\nappropriate and timely messages to help them understand whether they are moving\ntowards their goal. Ensure your notifications are relevant, timely, and\ninformative."),Object(n.b)("table",null,Object(n.b)("thead",{parentName:"table"},Object(n.b)("tr",{parentName:"thead"},Object(n.b)("th",o({parentName:"tr"},{align:null}),"Key principle"),Object(n.b)("th",o({parentName:"tr"},{align:null}),"Definition"))),Object(n.b)("tbody",{parentName:"table"},Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Relevant"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Notifications should be related to the user’s goals and presented in the context of what they are doing")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Timely"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Ensure users are kept up to date with prompt notifications and see critical notifications immediately")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Informative"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Provide users with the context and next steps needed to understand and address the notification")))),Object(n.b)("p",null,"Be considerate of your users when sending a notification. Notifications that are\ntoo frequent or disruptive create negative experiences and drive users from\nplatforms."),Object(n.b)("p",null,"Notifications are comprised of status and type. Their status signifies the\npurpose of the information being conveyed. Notification types allow you to\ntailor the disruptiveness of the notification to the specific situation.\nNotification status and type options in Carbon should be combined to create\nnotifications that are relevant, timely, and informative for each use case."),Object(n.b)(p,{mdxType:"Row"},Object(n.b)(u,{colSm:2,colMd:2,colLg:4,mdxType:"Column"},Object(n.b)("h4",null,"Notification status"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Informational"),Object(n.b)("li",{parentName:"ul"},"Success"),Object(n.b)("li",{parentName:"ul"},"Warning"),Object(n.b)("li",{parentName:"ul"},"Error"))),Object(n.b)(u,{colSm:2,colMd:2,colLg:4,mdxType:"Column"},Object(n.b)("h4",null,"Notification type"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Inline"),Object(n.b)("li",{parentName:"ul"},"Toast"),Object(n.b)("li",{parentName:"ul"},"Banner"),Object(n.b)("li",{parentName:"ul"},"Notification panel"),Object(n.b)("li",{parentName:"ul"},"Modal")))),Object(n.b)("h2",null,"Designing with notifications"),Object(n.b)("h3",null,"When to use"),Object(n.b)("p",null,"Use notifications to inform users of important status changes and updates.\nTransparency is a core element of building user trust and is the first of Jakob\nNielsen’s\n",Object(n.b)("a",o({parentName:"p"},{href:"https://www.nngroup.com/articles/ten-usability-heuristics/"}),"10 usability heuristics"),".\nThey should be relevant to the user and as minimally disruptive as possible.\nThere are two major use cases for notifications: task-generated and\nsystem-generated."),Object(n.b)("h4",null,"Task-generated notifications"),Object(n.b)("p",null,"Task-generated notifications are initiated in response to user action during a\nspecific task. They give users direct, immediate feedback. They should be placed\nin the region of the page the user is working in and be related to the user’s\naction."),Object(n.b)("p",null,"You might send a task-generated notification when:"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"A form is successfully submitted"),Object(n.b)("li",{parentName:"ul"},"There is a problem uploading a file"),Object(n.b)("li",{parentName:"ul"},"Credentials can’t be found")),Object(n.b)("h4",null,"System-generated notifications"),Object(n.b)("p",null,"These notifications are initiated by the application or system, independent of\nuser action. They provide updates on background system status or out-of-context\nevents that have finished."),Object(n.b)("p",null,"You might send a system-generated notification when:"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"A user loses network connection"),Object(n.b)("li",{parentName:"ul"},"Planned system maintenance is coming soon"),Object(n.b)("li",{parentName:"ul"},"A new report is ready"),Object(n.b)("li",{parentName:"ul"},"The user’s login session is about to expire")),Object(n.b)("h3",null,"When not to use"),Object(n.b)("p",null,"Only send notifications where necessary. Confine each notification to the\nportion of the interface and workflow it is relevant to. Being interrupted\ncreates a frustrating and discouraging experience for users, so this should be\nlimited as much as possible. Additionally, frequent distractions\n",Object(n.b)("a",o({parentName:"p"},{href:"https://link.springer.com/chapter/10.1007/978-1-4842-4221-6_9#Sec22"}),"lower productivity"),"\nand can lead to ",Object(n.b)("a",o({parentName:"p"},{href:"https://psnet.ahrq.gov/primer/alert-fatigue"}),"alert fatigue"),"."),Object(n.b)("h2",null,"Notification status"),Object(n.b)("p",null,"Notification status helps convey the information being communicated. These\nstatuses correspond with a color and icon to provide a consistent, universal\nexperience for users."),Object(n.b)(p,{mdxType:"Row"},Object(n.b)(u,{colLg:12,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",o({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"45.833333333333336%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAAA80lEQVQoz62R2W7CMBBF8/+/CFIEhBJDEmfxePdc7IBSHlpRqVg6Hj9c39kqZsa7UzR/1VXlUiaBbIC2HmR8jgHGxRUfeTNcAmH2CovLeIIqBA2KBja51bQqiWvhcbouOF8nNGLEpVdoB4KQGrOOW/a9OmE3HrAfMvKIem4yZzRO4Oblt+GnWn4aMlJKP8KFp9lvmvSi2Wb43wr5dSnlEanGMtQY+wPm4QiaGug8m2gFkh83cfi6QAmBsW2hbh2o62CkBCuVPejRMkp23yPYHt4MOUpE94DDBI60VlDaT9OMkD/7TMgGhag12Fqwc59fStHcAWOmwym2t8/XAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",o({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Example of notification status",title:"Example of notification status",src:"/static/cc4308ba6c3de64d7d22ded2ec2c204c/3cbba/1_notification_status_1120.png",srcSet:["/static/cc4308ba6c3de64d7d22ded2ec2c204c/7fc1e/1_notification_status_1120.png 288w","/static/cc4308ba6c3de64d7d22ded2ec2c204c/a5df1/1_notification_status_1120.png 576w","/static/cc4308ba6c3de64d7d22ded2ec2c204c/3cbba/1_notification_status_1120.png 1152w","/static/cc4308ba6c3de64d7d22ded2ec2c204c/0b124/1_notification_status_1120.png 1728w","/static/cc4308ba6c3de64d7d22ded2ec2c204c/99571/1_notification_status_1120.png 2240w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(n.b)(m,{mdxType:"Caption"},"Notification status using the inline notification component"))),Object(n.b)("br",null),Object(n.b)(g,{mdxType:"Title"}," Deciding what to use "),Object(n.b)("table",null,Object(n.b)("thead",{parentName:"table"},Object(n.b)("tr",{parentName:"thead"},Object(n.b)("th",o({parentName:"tr"},{align:null}),"Status"),Object(n.b)("th",o({parentName:"tr"},{align:null}),"Usage"),Object(n.b)("th",o({parentName:"tr"},{align:null}),"Action"),Object(n.b)("th",o({parentName:"tr"},{align:null}),"Color"),Object(n.b)("th",o({parentName:"tr"},{align:null}),"Icon"))),Object(n.b)("tbody",{parentName:"table"},Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Informational"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Provide additional information to users that may not be tied to their current action or task"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Do not require immediate action and can be dismissed on a timer or persist, depending on the content"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Blue"),Object(n.b)("td",o({parentName:"tr"},{align:null}),Object(n.b)("inlineCode",{parentName:"td"},"information filled"))),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Success"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Confirm a task was completed as expected"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Typically do not require further action and can be dismissed automatically or persist in a nonintrusive manner"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Green"),Object(n.b)("td",o({parentName:"tr"},{align:null}),Object(n.b)("inlineCode",{parentName:"td"},"checkmark filled"))),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Warning"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Inform users that they are taking actions that are not desirable or might have unexpected results"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Often persist until the user dismisses the notification or continues in their task"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Yellow"),Object(n.b)("td",o({parentName:"tr"},{align:null}),Object(n.b)("inlineCode",{parentName:"td"},"warning filled"))),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Error"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Inform users of an error or critical failure and optionally block the user from proceeding until the issue has been resolved"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Always persist until the user dismisses them or resolves error"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Red"),Object(n.b)("td",o({parentName:"tr"},{align:null}),Object(n.b)("inlineCode",{parentName:"td"},"error filled"))))),Object(n.b)("h2",null,"Notification types"),Object(n.b)(p,{mdxType:"Row"},Object(n.b)(u,{colLg:12,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",o({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"45.833333333333336%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAJCAYAAAAywQxIAAAACXBIWXMAAAsSAAALEgHS3X78AAABhElEQVQoz31S30vCYBTdH2O+VP9Z1EtCUI89BdWD5ENg0kNBL4sCY4MtaeJE8CFCSRzNFPXB35sbOXWedi85QqwDZ7vb/e757rnfJywWCwyHQ/R6PfT7fXS7XTiOA8JsNoPruiGDpaD1BMdxf2oGwbuP0WjEOWE+n0PTslBVFVlNg6IoqFarXKQF35FIBNHoBja3tnF8EsdH7ZNzr28liA9pPMkKHtMSXrI5+L4PgVTnPkJQV7QJodPpQJIkyLLMVNVndkGg4lVwh/Sw3Qks5wt2wPF4jMlkElpbB8qRIG38mwThr8LlgnUgF9PpNKTneWHMMywUCshkMsjlchDFexSLRS4cDAbQdZ2ZJ+Z1WJbFArZts5tVcod0Wu12O+jKx9HhAfZ2d1iwVCohmUyiXC7jvWIglbqGYVTZMgnSbVhlaHk55POzU8Ri+xwbhoFE4gI3t3e4EiuIX96hUTeDQ/T/FyQxmguh1WqhXq9zTIfTbDZhmibMWiOI28GcPP5P9tYJfgMXrZgp9UshswAAAABJRU5ErkJggg==')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",o({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Examples of basic notification types",title:"Examples of basic notification types",src:"/static/92d3722369c9eefb4b33355eea345b37/3cbba/2_Notification_types_1120.png",srcSet:["/static/92d3722369c9eefb4b33355eea345b37/7fc1e/2_Notification_types_1120.png 288w","/static/92d3722369c9eefb4b33355eea345b37/a5df1/2_Notification_types_1120.png 576w","/static/92d3722369c9eefb4b33355eea345b37/3cbba/2_Notification_types_1120.png 1152w","/static/92d3722369c9eefb4b33355eea345b37/0b124/2_Notification_types_1120.png 1728w","/static/92d3722369c9eefb4b33355eea345b37/99571/2_Notification_types_1120.png 2240w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "))),Object(n.b)("br",null),Object(n.b)(g,{mdxType:"Title"}," Deciding what to use "),Object(n.b)("table",null,Object(n.b)("thead",{parentName:"table"},Object(n.b)("tr",{parentName:"thead"},Object(n.b)("th",o({parentName:"tr"},{align:null}),"Type"),Object(n.b)("th",o({parentName:"tr"},{align:null}),"Usage"),Object(n.b)("th",o({parentName:"tr"},{align:null}),"Duration and interaction"))),Object(n.b)("tbody",{parentName:"table"},Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Inline"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Provide users with nondisruptive feedback or the status of an action"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Persist until the message is resolved or dismissed by user and may include a ghost button action")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Toast"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Short, time-based messages that slide in and out of a page and provide nondisruptive information"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Disappear automatically or can be dismissed by user")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Banner"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"System or product level notifications that are not specific to a task"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Persist until dismissed by user and may include a ghost button or link")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Notification panel"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Notification center that provides users with system-generated messages"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Opened and closed by user")),Object(n.b)("tr",{parentName:"tbody"},Object(n.b)("td",o({parentName:"tr"},{align:null}),"Modal"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Highly disruptive notifications that provide users with critical information that needs their attention or action"),Object(n.b)("td",o({parentName:"tr"},{align:null}),"Persist and block tasks until dismissed by user. Modals allow more user action than other notifications and can include other Carbon components.")))),Object(n.b)("h3",null,"Inline notification"),Object(n.b)("p",null,Object(n.b)("a",o({parentName:"p"},{href:"https://www.carbondesignsystem.com/components/notification/usage/"}),"Inline notifications"),"\nare nondisruptive and confined to a specific area in the UI. Inline\nnotifications display both task-generated and system-generated messages and\npersist until they are dismissed by the user or the notification is resolved.\nThey are frequently used in conjunction with field-level messages for errors in\nforms or other input areas."),Object(n.b)("p",null,"Carbon offers low-contrast and high-contrast inline notifications. All inline\nnotifications use a color that corresponds with their message intent and can\nalso be accompanied by an icon to reinforce the message intent."),Object(n.b)("h4",null,"Best practices:"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Place inline notifications near their related items."),Object(n.b)("li",{parentName:"ul"},"In forms, inline notifications can be placed either at the top or bottom."),Object(n.b)("li",{parentName:"ul"},"Keep the message under two lines."),Object(n.b)("li",{parentName:"ul"},"Do not cover other content with inline notifications."),Object(n.b)("li",{parentName:"ul"},"The notification width varies based on the context and page layout."),Object(n.b)("li",{parentName:"ul"},"Be descriptive and give users clear next steps.")),Object(n.b)(p,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",o({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"64.58333333333334%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAACLklEQVQ4y62Ty44SQRSG+w2YsGMw4X4LIaMLRKIiITHBxOdwBwvuRHbIblwQFq647EwwosS3IZoIIxcHQjcNDd2A/NYpGGbGGHVhJX+qurrqq/+cqiPgPzdhu92iUqkgk8kgn88jm80il8sde5q/qXQ6jUKhgFKpdFSxWES5XIYsyxA2mw3Oz18jnckikUgglUrxTclkkisejx8Vi8X4XDQaxcnJCfR6PZdOp4PX68VgMIBwZXWlrrFZr/l4t9v9Max2uw232w2fzwePxwOHw4FIJILRaASBts7nMiaTMURRxGw2gyRJbG6OxWJxS/SPWqPRgNPphN/v52Cr1YpQKIThcLh3KIoSer0exuMxlsslFEXh+h2Q3BOQnJFDcme32xEOh/dAWkCLyZWmaVBV9ajVanXrm9ZRq9frMJlMcLlcHGixWBAMBg8hMyC5oRu6CSCnlALqfwVWq1UYDAYOpNDNZjMCgcAeyEOeTnm4BF4ewr06hCAEXR6+qdVqNRiNxj3Q5YHJbMP9QPAa+LXbRffiAgvKG9OcQebK4np8kHS4FArZbrPh7Owu3DYj7nnu4FkkwHLY39+yMvqO2ecvmLKkiv0+ZHbSjIl6lbmXxxJmlxKUyQQ/WCE0m008fPQY0adhnD55CeHBG5w+r+Lb5XwP1BYKNHb6ij0VksrcqId+zVyulSWXxsZUCJ1OB63WB3z6+A6v3ot48RbItljqFFZ6+Msj3v1TBW+Ytnz1T32ITZ1gkrC7AAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",o({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Inline notification in a product",title:"Inline notification in a product",src:"/static/56e60ccbb93529985307bb4d32fc5348/3cbba/3_Inline_736.png",srcSet:["/static/56e60ccbb93529985307bb4d32fc5348/7fc1e/3_Inline_736.png 288w","/static/56e60ccbb93529985307bb4d32fc5348/a5df1/3_Inline_736.png 576w","/static/56e60ccbb93529985307bb4d32fc5348/3cbba/3_Inline_736.png 1152w","/static/56e60ccbb93529985307bb4d32fc5348/392b1/3_Inline_736.png 1472w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(n.b)(m,{mdxType:"Caption"},"Low-contrast inline notification"))),Object(n.b)("h3",null,"Toast"),Object(n.b)("p",null,Object(n.b)("a",o({parentName:"p"},{href:"https://www.carbondesignsystem.com/components/notification/usage/"}),"Toasts")," are\nnotifications that slide in and out, typically in the top right of the page.\nThey are more disruptive than inline notifications and are best used with\nsystem-generated messages that do not correspond to a specific section of the\nUI. Toasts disappear automatically after a set amount of time but can also be\ndismissed by the user."),Object(n.b)("p",null,"Carbon toasts can be either low-contrast or high-contrast. Their color should\ncorrespond with the message intent and they can also use an icon to convey the\nmessage intent."),Object(n.b)("h4",null,"Long messages"),Object(n.b)("p",null,"Removing the timestamp provides space for a third line of content for longer\ntoast messages. Toasts are intended to be at-a-glance messages confined to a\nsmall region of the screen so their messages should not exceed three lines."),Object(n.b)("p",null,"If it is possible a toast will have a message longer than three lines, include a\nshort message with a “View more” link that takes the user to a view of the full\nnotification message. This can be either a full page with more details or a\nmodal."),Object(n.b)("h4",null,"Best practices:"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Multiple toasts stack horizontally, with the newest appearing at the top of\nthe list."),Object(n.b)("li",{parentName:"ul"},"Keep messages clear and concise"),Object(n.b)("li",{parentName:"ul"},"Toasts dismiss after five seconds."),Object(n.b)("li",{parentName:"ul"},"The timestamp is optional and can be removed."),Object(n.b)("li",{parentName:"ul"},"Toast notifications have a fixed width and should not be expanded to fit the\ncontent area.")),Object(n.b)(p,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",o({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"64.58333333333334%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAACWElEQVQ4y62Ty09TURCHqyIUJLSVKK9WFxAQIUokPgBFTSBx6dKtrv0PTEwAF/RFS41sTaiJC4Mr/wETowuiwfggLmqq0FKglftqe/uAz3NPUwI+VnqTL3POb05m5syZa+M/f7ZyuUw0GsXn8xEIBPD7/fuwdK/Xu4vcT3t5MDnFlMXEBBP37zEb9KFrKrZiscjQ0BCNjY04nU4cDoe0Fi6XS+p7OdLQgPOok97Bfs6cP8vA8DB9124xcvMuK8kMtkKhwPj4OF1dXZK2tjba29ulbW1tlbZKR0cHza5mBi9fYFH5xNL6Mp/1byRQeLmaJpY0KwHHxsbo7Oyku7sbt9uNx+OhpaXlN6wELoeTgYvneL3yjlexRd58X+KDEuPFxy/EEkblyldHR8VVm3Yrs+ze9a+a2+Omp+8UPf399J32cPLSbXrvvCexKSo0TZORK9dxHT8henOM+vp67Ha7tA2iX3V1ddJWNYva2lpqDh2m5qCNA0292HoeY7/xlpWNQqXChYXnzEefMDc3RygUkq8dCoeZjUQIBINEIg+ZmQlJLRyexS/8weAMwcA0/kfPmJxfJfR0GdUoYZPDs7Pzj9NXEhRFmO1KwEwmQzweZy2VQtM0FEXl65pO8kee5FaWpGKQUHTWhS+R1ohv5EgpOeEzSKpZElqWtG6wvS0C7ojqdF1HVVUZzFobhkFqU8HI5rBq30WcVfQsqfQWpVJ5n88U02L9JDKg9TBV8vm8tLlcFk0ksfaSXA6r34WCKRKrMqlpVvWCSFCqVPi3rlS7aiXcy74zf9B/AhA4/EOjhDB3AAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",o({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Toast notification in a product",title:"Toast notification in a product",src:"/static/c734aa8e9a5a84c0f082fff2628fc48d/3cbba/4_Toast_736.png",srcSet:["/static/c734aa8e9a5a84c0f082fff2628fc48d/7fc1e/4_Toast_736.png 288w","/static/c734aa8e9a5a84c0f082fff2628fc48d/a5df1/4_Toast_736.png 576w","/static/c734aa8e9a5a84c0f082fff2628fc48d/3cbba/4_Toast_736.png 1152w","/static/c734aa8e9a5a84c0f082fff2628fc48d/392b1/4_Toast_736.png 1472w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(n.b)(m,{mdxType:"Caption"},"Low-contrast toast notification"))),Object(n.b)("h3",null,"Banner"),Object(n.b)("p",null,"Banners take over the top of an interface to show general notifications for the\nproduct or system, not a specific task. They persist until they are dismissed by\nthe user. Banners can include a ghost button or link. Depending on the message,\nthe user resolving a product or system issue (for example, updating necessary\naccount information), may also dismiss the banner. Banners may also persist\nacross multiple sessions."),Object(n.b)("h4",null,"Best practices:"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Banners should be placed at the top of the content area they relate to."),Object(n.b)("li",{parentName:"ul"},"Do not cover other content with a banner notification."),Object(n.b)("li",{parentName:"ul"},"Place system-wide messages directly below the main header or navigation bar."),Object(n.b)("li",{parentName:"ul"},"Banners are not sticky and should scroll with the other content on the page."),Object(n.b)("li",{parentName:"ul"},"Only show one banner at a time.")),Object(n.b)("p",null,"More design iteration and user testing is needed before Carbon solidifies our\nguidance for banners and creates a banner component. Keep an eye out for refined\nusage examples in the future. If your team has developed a banner component,\nconsider contributing it to Carbon so that it can be made available to others."),Object(n.b)(p,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",o({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"64.2361111111111%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAAB0ElEQVQ4y61TTY/TMBDNr23LpkVC6rVpeysS8Ae40H/AhRN3zkgcEII97TZpEtdunDTOh52Hx2mWbhctF6I8eWY87+WNk3j4z5fXdR0+bLcIggXW6zWWy6XFCsvVCiuLIAieBfUvFgtsNhsIIeAZY/Du7Rv4/hRT/wb+zQvMZlPMpj5e2nUyGWMyJowwHl3gnI/O+Xw+B2MMHtDhUAAsB3imIMsWqkUPDVS6j2sD2PsRri+a1o0cW8Uo4UgOEgmXSHmOVORgZ6S2xkQBkSsc8wpcKmSFQiwqfP5W49PXGl9+VOiMJodAmsS4/fXTrUm8xz6KznGMKAwR2xrlYbjD7v7O5SwO8f02wqstx/g9x+uPR+fbCQpxRJKkyPMcXHDsojtkWeYQWXHOBaS0zlNmxWIXM3ZAvI+g1RGmytCqDNq+DzdyXddQSsGYjk4Cp0o+nEvbtn/9PAaethxitdpAa90Lkhg9tWkatKax53Swmwb0BZxOJ0ekPhInEsXUWxSFq/V5+0eQCGVZuk3TaRSldG6HPVoJ9IAhJnI/lXmY5InDqqqs9QZCpjC6J5NDcjOIDKIkQA6p9kSQggFEuCQO9cHhJa77KPae+y+p8V/xdf4bJWa+J9cXbO8AAAAASUVORK5CYII=')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",o({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Banner notification in a product",title:"Banner notification in a product",src:"/static/e64d7a7dd2c68c7af80f720505e6b6bf/3cbba/5_Banner_736.png",srcSet:["/static/e64d7a7dd2c68c7af80f720505e6b6bf/7fc1e/5_Banner_736.png 288w","/static/e64d7a7dd2c68c7af80f720505e6b6bf/a5df1/5_Banner_736.png 576w","/static/e64d7a7dd2c68c7af80f720505e6b6bf/3cbba/5_Banner_736.png 1152w","/static/e64d7a7dd2c68c7af80f720505e6b6bf/0b124/5_Banner_736.png 1728w","/static/e64d7a7dd2c68c7af80f720505e6b6bf/99571/5_Banner_736.png 2240w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(n.b)(m,{mdxType:"Caption"},"Low-contrast banner notification"))),Object(n.b)("h3",null,"Notification panel"),Object(n.b)("p",null,"Notification panels are helpful for users who receive a large number of\nsystem-generated notifications or may need to reference their notifications\nlater. They are used in conjunction with toasts to alert users of notifications\nas they come in."),Object(n.b)("p",null,"Notification panels ensure that users can access and read all notifications\nwithout cluttering the screen with many persistent notifications. They also\nprovide a consistent experience to users who need more time to read\nnotifications, use a screen reader, or prefer to limit the notifications they\nreceive."),Object(n.b)("p",null,"More design iteration and user testing is needed before Carbon solidifies our\nguidance for notification panel and creates a notification panel component. Keep\nan eye out for refined usage examples in the future. If your team has developed\na notification panel component, consider contributing it to Carbon so that it\ncan be made available to others."),Object(n.b)("h4",null,"Best practices:"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Give users the ability to manage notification preferences."),Object(n.b)("li",{parentName:"ul"},"Don’t send the same notification multiple times if users don’t interact with\nit."),Object(n.b)("li",{parentName:"ul"},"List notifications in chronological order."),Object(n.b)("li",{parentName:"ul"},"Notifications can be grouped by source or urgency.")),Object(n.b)(p,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",o({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"64.58333333333334%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAACmklEQVQ4y62TzU8aURTFZ+FOiw1FYRREYBgYU6hAgVSRNEar6+676KaJNmxdYCKNQsGCkhSb2Bg37v0v1PRDa2Ka2FSgoYi6IAim1oRYT+97tLTufcnN+5iZ35x7z7sCbngIvy4vsba2hkQ8joWFBSSTSczPzzcjkUhc27Pns7OzCIfDmJ6epggjMjOD5eW3ODs7g1Cv1+H3+3BLdRsmswRR1EGlUjWjvb29GWzf0tKCwNAQQqEQJiYmMPk8hCdPn8HjcaFYPGwAh4eHodOJsNlskK1WyLIMK80s7HZ7c202m9Ha2opMKoWrK6BGitjY2/6M+/4ASod/gMFgENrOTtx13INFVuhjGSaTCRaLBb29vRzE1hKFVqtFklIuFL7jazaH8kkRm3sncDxOoFTINoCBQAAajQbd3Xp0EFgURej1etp3w9jTQ+p1/IzB29raEKe6Hh+fELSA8/Mf2Hr3AR6vH4d/FQ4ODnLAwMAA3G4XnE4nJEniqh7QmdfrhcvlgqIoUKvVSKWSOK1Wkc3l8PPiAp+238Pjdv8DMpDVYsbYyAiGqOA+nw8WAiqyFSMPg9wEVhb2I7X6Dl4lZlAul5HPf0OlUsH2xw0yxfOfQkq5i1LqU/p48Zkyo9EIE6XbRwZJUsMUZhoz5WXsBY6OjpDNZlElpRubW9eBTBUr/Pj4OFfLUmTuMsCjsTGMjo7yc4fDwa/O4mIaldNT5PJ5VGs17O7u0tXzo1QqNYD9/f38RZtd4RAG7+jQQOwywK44SbGZ19RgMEAQBExNTWF//wt2dnZwcHCA9fV1ftWKxSKES+qUN0tLdPvnkFp8Td2QRJy6hsXcXBSxWAzRaJQHW0ciEaTTaayurmJlZYXPmUyGjEqhRmqFm+7l32nZjUdPahShAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",o({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Notification panel in a product",title:"Notification panel in a product",src:"/static/0fc22e702ba5e9d7921896e18af5c6e6/3cbba/6_Panel_736.png",srcSet:["/static/0fc22e702ba5e9d7921896e18af5c6e6/7fc1e/6_Panel_736.png 288w","/static/0fc22e702ba5e9d7921896e18af5c6e6/a5df1/6_Panel_736.png 576w","/static/0fc22e702ba5e9d7921896e18af5c6e6/3cbba/6_Panel_736.png 1152w","/static/0fc22e702ba5e9d7921896e18af5c6e6/392b1/6_Panel_736.png 1472w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(n.b)(m,{mdxType:"Caption"},"Notification panel with the Gray 100 theme"))),Object(n.b)("h3",null,"Modal"),Object(n.b)("p",null,"Modals interrupt the user and pause their current task. They are highly\ndisruptive to users and should be used sparingly. Only use a modal when the\nmessage is critical and needs the user’s immediate attention or action. Modals\npersist until users engage with them and only disappear when dismissed by the\nuser."),Object(n.b)("h4",null,"Best practices:"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},"Only display one modal notification at a time."),Object(n.b)("li",{parentName:"ul"},"Use modals when you need to immediately interrupt a user’s task."),Object(n.b)("li",{parentName:"ul"},"Give users clear steps to resolve and dismiss the notification.")),Object(n.b)(p,{mdxType:"Row"},Object(n.b)(u,{colLg:8,mdxType:"Column"},Object(n.b)("span",{className:"gatsby-resp-image-wrapper",style:{position:"relative",display:"block",marginLeft:"auto",marginRight:"auto",maxWidth:"1152px"}},"\n      ",Object(n.b)("span",o({parentName:"span"},{className:"gatsby-resp-image-background-image",style:{paddingBottom:"64.58333333333334%",position:"relative",bottom:"0",left:"0",backgroundImage:"url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAANCAYAAACpUE5eAAAACXBIWXMAAAsSAAALEgHS3X78AAACcElEQVQ4y61TS2tTQRjN1oiQEmsS6CZ1pdZVyfsWQ2gWSruoSFtjQEFwpyZNo5EkN+/Hzb29aQKNpQR/R/Owad1Y8A8ILiJk1VWb0Bry4jgzEUqg4KYXDt83l+HM+eacUeCaP8VwOES5XEY0GkUikUA8Hp9ALBb7D+Lg+QgkaQudThuKwWAAt9sNg8EAi8UCk8kEs9nMeqvVytZXwWg0wWox4hFngs08j+Wlxzg5OYFiNBphb28P4XAYqVSKqUomk+z0bDYLQRBYnYQAeUvCB17G6408Xr6TEBNKuDjvjEculUoIBAIIBoMIhUKMXBRFyLKMfD6PQqEwxjbFNvufiEfw4k0Y9tUouKdhvP0oXRLu7u4i8CmIYIhHJMIzFa1WC6enp2i32+j1euj2+/jT72FELp72O0RELBJEOhFCJhklB8lkLyGkzlBl9+4/wLzBhIdzc1hYWECz2US322WEnU4H/bMzDAhwfkFqG1+Ikel0hk2SyWTZBHQvI/R4vbhx8xZu39FCNTWF6elprKys4Pn6OlYJXq2t4cfyM/x2LuGX4wl+OpfxmTibliSIQo4QZiYJfT4fNBoN7s7OQq/XM6jVanA2G/x+PzY8HsheH7bf+1HwbGJn0w8xnYaQyyGXu4LQSxSqVCrMzMxAq9VCp9NBqVTCbrejUNxBVpQhEHOyxBAKgUCk6si4Eqk0CcVi8ZKQ53nYbBwWF51wOByMiOM4uFwuFnYaoQRBnIafBp72NPT/gk8fBVXKCGkOj4+/o/71AAeNI3w7OsLh4SFDo9FApVJBvV5HrVZjPa3VanVca1XsV/bZmu6nJiqu+y3/BYdK4AXGSossAAAAAElFTkSuQmCC')",backgroundSize:"cover",display:"block"}})),"\n  ",Object(n.b)("img",o({parentName:"span"},{className:"gatsby-resp-image-image",alt:"Modal notification in a product",title:"Modal notification in a product",src:"/static/0da2a9b29c854d840b540b0058a47cff/3cbba/7_Modal_736.png",srcSet:["/static/0da2a9b29c854d840b540b0058a47cff/7fc1e/7_Modal_736.png 288w","/static/0da2a9b29c854d840b540b0058a47cff/a5df1/7_Modal_736.png 576w","/static/0da2a9b29c854d840b540b0058a47cff/3cbba/7_Modal_736.png 1152w","/static/0da2a9b29c854d840b540b0058a47cff/392b1/7_Modal_736.png 1472w"],sizes:"(max-width: 1152px) 100vw, 1152px",style:{width:"100%",height:"100%",margin:"0",verticalAlign:"middle",position:"absolute",top:"0",left:"0"},loading:"lazy"})),"\n    "),Object(n.b)(m,{mdxType:"Caption"},"Danger modal notification"))),Object(n.b)("h2",null,"Considerations when designing"),Object(n.b)("h3",null,"Notification priority"),Object(n.b)("p",null,"Notifications range in their priority and therefore should vary in their\ndisruptiveness to users. It is important to match the urgency and priority of\nthe information being communicated to the visual style and behavior of the\nnotification."),Object(n.b)("p",null,"Carbon offers two visual styles for inline and toast notifications. The\nhigh-contrast style is more visually disruptive and should be used for\nnotifications that are urgent or critical. The low-contrast style is better for\nsupplemental messaging or other low priority use cases. Toast and inline\nnotifications can use different styles, but you should never mix styles within\nthe variations."),Object(n.b)("h3",null,"User action"),Object(n.b)("h4",null,"Optional action"),Object(n.b)("p",null,"Notifications can include a ghost button that lets users interact with them.\nTaking action on these notifications should be optional and should not block the\nuser from continuing with their current task. This action frequently takes users\nto a flow or page related to the message, where they can resolve the\nnotification. All notifications should be dismissed when users interact with\nthem."),Object(n.b)("h4",null,"Required action"),Object(n.b)("p",null,"Some notifications must block users from dismissing the notification or\ncontinuing with their task until the message has been addressed. This is common\nin forms when there are errors or empty input fields. Notifications that prevent\nusers from continuing should be relevant to the current task and provide the\nuser with the steps needed to resolve them or continue with their current task."),Object(n.b)("p",null,"Blocking users from continuing with a task is disruptive and hinders the overall\nexperience, so these notifications should only be used when it is critical the\nuser sees the notification or the user needs to take action right away."),Object(n.b)("h3",null,"Notification message"),Object(n.b)("p",null,"It’s important to consider the user’s context when writing notification\nmessages. Use language that is accessible to the user and that will be easily\nunderstood. Use a tone that is appropriate for the situation and notification."),Object(n.b)("p",null,"Because task-generated notifications are sent in response to user action, it\nisn’t necessary to give users extensive background information. Conversely,\nsystem-generated notifications are generally not relevant to the user’s current\ntask so you should ensure the user has sufficient context to understand the\nnotification."),Object(n.b)(h,{mdxType:"DoDontRow"},Object(n.b)(f,{caption:"Do use clear and concise language.",text:"Success! Your resource has been created.",aspectRatio:"1:1",mdxType:"DoDont"}),Object(n.b)(f,{type:"dont",caption:"Do not use technical jargon or language unfamiliar to the user.",text:"503 Service Unavailable",aspectRatio:"1:1",mdxType:"DoDont"})),Object(n.b)(h,{mdxType:"DoDontRow"},Object(n.b)(f,{caption:"Do ensure users know how to take action if it is necessary.",text:"Script failed to run. Check the log for more detail.",aspectRatio:"1:1",mdxType:"DoDont"}),Object(n.b)(f,{type:"dont",caption:"Do not leave users without next steps.",text:"Instance was not created.",aspectRatio:"1:1",mdxType:"DoDont"})),Object(n.b)("h2",null,"Accessibility"),Object(n.b)("p",null,Object(n.b)("strong",{parentName:"p"},"Don’t use notifications that dismiss on a timer for critical or emergency\nmessages.")," Some users with disabilities need more time to read or interact with\nmessages and timed toasts may not provide sufficient time.\n",Object(n.b)("a",o({parentName:"p"},{href:"https://www.w3.org/WAI/WCAG21/Understanding/no-timing.html"}),"WCAG 2.1 success criterion 2.2.4 (AAA)")),Object(n.b)("p",null,Object(n.b)("strong",{parentName:"p"},"Users should be able to manage or limit noncritical notifications.")," This\ngives users the control to reduce the number of distractions or disruptions they\nreceive, which is particularly helpful for users with cognitive limitations.\n",Object(n.b)("a",o({parentName:"p"},{href:"https://www.w3.org/WAI/WCAG21/Understanding/interruptions.html"}),"WCAG 2.1 success criterion 2.2.3 (AAA)")),Object(n.b)("h2",null,"Related components and patterns"),Object(n.b)(p,{mdxType:"Row"},Object(n.b)(u,{colSm:2,colMd:2,colLg:4,mdxType:"Column"},Object(n.b)("h4",null,"Components"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",o({parentName:"li"},{href:"/components/modal/usage"}),"Modal")),Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",o({parentName:"li"},{href:"/components/notification/usage"}),"Notification")),Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",o({parentName:"li"},{href:"/components/UI-shell-right-panel/usage"}),"UI shell")))),Object(n.b)(u,{colSm:2,colMd:2,colLg:4,mdxType:"Column"},Object(n.b)("h4",null,"Patterns"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",o({parentName:"li"},{href:"https://www.carbondesignsystem.com/patterns/dialog-pattern/"}),"Dialogs")),Object(n.b)("li",{parentName:"ul"},"Error states (future)"),Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",o({parentName:"li"},{href:"/patterns/forms-pattern/"}),"Forms"))))),Object(n.b)("p",null,"The Error state pattern is currently being planned. If you would like to\ncontribute, please see our\n",Object(n.b)("a",o({parentName:"p"},{href:"/contributing/pattern"}),"guidelines for contributions"),"."),Object(n.b)("h2",null,"References"),Object(n.b)("ul",null,Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",o({parentName:"li"},{href:"https://psnet.ahrq.gov/primer/alert-fatigue"}),"Alert Fatigue")," (Patient Safety\nNetwork, 2019)"),Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",o({parentName:"li"},{href:"https://www.w3.org/TR/wai-aria-1.1/#aria-live"}),"Aria Live Regions")," (W3C, 2017)"),Object(n.b)("li",{parentName:"ul"},"Duncan P. Brumby, Christian P. Janssen, and Gloria Mark,\n",Object(n.b)("a",o({parentName:"li"},{href:"https://link.springer.com/chapter/10.1007/978-1-4842-4221-6_9"}),"How Do Interruptions Affect Productivity?"),"\n(Rethinking Productivity in Software Engineering, 2019)"),Object(n.b)("li",{parentName:"ul"},"Kim Flaherty,\n",Object(n.b)("a",o({parentName:"li"},{href:"https://www.nngroup.com/articles/indicators-validations-notifications/"}),"Indicators, Validations, and Notifications"),"\n(Nielsen Norman Group, 2015)"),Object(n.b)("li",{parentName:"ul"},"Aurora Harley,\n",Object(n.b)("a",o({parentName:"li"},{href:"https://www.nngroup.com/articles/visibility-system-status/"}),"Visibility of System Status"),"\n(Nielsen Norman Group, 2018)"),Object(n.b)("li",{parentName:"ul"},"Jakob Nielsen,\n",Object(n.b)("a",o({parentName:"li"},{href:"https://www.nngroup.com/articles/ten-usability-heuristics/"}),"10 Usability Heuristics for User Interface Design"),"\n(Nielsen Norman Group, 1994)"),Object(n.b)("li",{parentName:"ul"},Object(n.b)("a",o({parentName:"li"},{href:"https://www.w3.org/WAI/standards-guidelines/wcag/"}),"Web Content Accessibility Guidelines"),"\n(W3C, 2018)")),Object(n.b)("h2",null,"Feedback"),Object(n.b)("p",null,"Help us improve this pattern by providing feedback, asking questions, and\nleaving any other comments on\n",Object(n.b)("a",o({parentName:"p"},{href:"https://github.com/carbon-design-system/carbon-website/issues/new?assignees=&labels=feedback&template=feedback.md"}),"GitHub"),"."))}y.isMDXComponent=!0},I8xM:function(e,t,a){e.exports={bxTextTruncateEnd:"PageTabs-module--bx--text-truncate--end--267NA",bxTextTruncateFront:"PageTabs-module--bx--text-truncate--front--3xEQF",tabsContainer:"PageTabs-module--tabs-container--8N4k0",list:"PageTabs-module--list--3eFQc",listItem:"PageTabs-module--list-item--nUmtD",link:"PageTabs-module--link--1mDJ1",selectedItem:"PageTabs-module--selected-item--YPVr3"}},QH2O:function(e,t,a){e.exports={bxTextTruncateEnd:"PageHeader-module--bx--text-truncate--end--mZWeX",bxTextTruncateFront:"PageHeader-module--bx--text-truncate--front--3zvrI",pageHeader:"PageHeader-module--page-header--3hIan",withTabs:"PageHeader-module--with-tabs--3nKxA",text:"PageHeader-module--text--o9LFq"}}}]);