{"componentChunkName":"component---src-pages-components-notification-usage-mdx","path":"/components/notification/usage/","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Notification","description":"Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.","tabs":["Code","Usage","Style"]},"relativePagePath":"/components/notification/usage.mdx","titleType":"prepend","MdxNode":{"id":"b437fd03-fb27-522e-a72c-1f26f9422781","children":[],"parent":"4c5135a5-7270-5515-bc8d-b9918ff1ca64","internal":{"content":"---\ntitle: Notification\ndescription: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Notifications_ are messages that communicate information to the user.\n\n## Format\n\n#### Title\n\nAll notifications have subject titles, which should be short and descriptive. (Example: “Tester-app-02 has crashed.”)\n\n#### Message\n\nWe recommend the body of the notification be contained within two lines. Be descriptive and include any troubleshooting actions or next steps. When possible, communicate the main message using just the title. You can include [links](/components/link/code) within the notification body that redirect the user to next steps.\n\n#### Dismissal\n\nWe recommend that toast notifications automatically disappear after five seconds. Inline notifications are persistent until the user dismisses them. All notifications have at least one method of dismissal (typically, it is a small “x” in the upper right hand corner).\n\n#### Icons\n\nIcons may provide additional clarity. Icons should be placed to the left of a title. These glyphs (16x16) can be found in the [icons](/guidelines/icons/library) library.\n\n<Row>\n<Column colLg={8}>\n\n![The three icon states](images/notification-usage-1.png)\n\n</Column>\n</Row>\n\n## Variations\n\n| Notification type     | Purpose                                                                                                                                                               |\n| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| _Toast notification_  | Toasts are a non-modal, time-based window elements used to display short messages; they usually appear at the bottom of the screen and disappear after a few seconds. |\n| _Inline notification_ | 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.                   |\n\n### High vs. low contrast\n\nUse high-contrast style notifications for critical messaging. Low-contrast notifications are best used for supplemental messaging and are less visually disruptive to users. When in doubt, use the low contrast style.\n\nInline and toast notifications can use different styles but you should never mix styles within the variations.\n\n<Row>\n<Column colLg={8}>\n\n![High vs. low contrast](images/notification-usage-4.png)\n\n</Column>\n</Row>\n\n## Placement\n\n#### Toast notifications\n\nToast notifications slide in and out a page from the top-right corner. Actionable notifications do not appear on mobile screen widths.\n\n<Row>\n<Column colLg={8}>\n\n![Toast notification example](images/notification-usage-2.png)\n\n</Column>\n</Row>\n\n#### Inline notifications\n\nInline notifications appear near its related item. In [forms](/components/form/code), we recommend placing the inline notification at the bottom of the form, right before the submission buttons. Depending on the context of the page, inline notifications can appear above the content as well.\n\n<Row>\n<Column colLg={8}>\n\n![Form example with inline notification](images/notification-usage-3.png)\n\n</Column>\n</Row>\n","type":"Mdx","contentDigest":"a5f6ebb7d25648a45b9428e577fd0421","counter":1369,"owner":"gatsby-plugin-mdx"},"frontmatter":{"title":"Notification","description":"Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.","tabs":["Code","Usage","Style"]},"exports":{},"rawBody":"---\ntitle: Notification\ndescription: Notifications are messages that communicate information to the user. The two main types of notificaitons are toast notifications and inline notifications.\ntabs: ['Code', 'Usage', 'Style']\n---\n\n## General guidance\n\n_Notifications_ are messages that communicate information to the user.\n\n## Format\n\n#### Title\n\nAll notifications have subject titles, which should be short and descriptive. (Example: “Tester-app-02 has crashed.”)\n\n#### Message\n\nWe recommend the body of the notification be contained within two lines. Be descriptive and include any troubleshooting actions or next steps. When possible, communicate the main message using just the title. You can include [links](/components/link/code) within the notification body that redirect the user to next steps.\n\n#### Dismissal\n\nWe recommend that toast notifications automatically disappear after five seconds. Inline notifications are persistent until the user dismisses them. All notifications have at least one method of dismissal (typically, it is a small “x” in the upper right hand corner).\n\n#### Icons\n\nIcons may provide additional clarity. Icons should be placed to the left of a title. These glyphs (16x16) can be found in the [icons](/guidelines/icons/library) library.\n\n<Row>\n<Column colLg={8}>\n\n![The three icon states](images/notification-usage-1.png)\n\n</Column>\n</Row>\n\n## Variations\n\n| Notification type     | Purpose                                                                                                                                                               |\n| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| _Toast notification_  | Toasts are a non-modal, time-based window elements used to display short messages; they usually appear at the bottom of the screen and disappear after a few seconds. |\n| _Inline notification_ | 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.                   |\n\n### High vs. low contrast\n\nUse high-contrast style notifications for critical messaging. Low-contrast notifications are best used for supplemental messaging and are less visually disruptive to users. When in doubt, use the low contrast style.\n\nInline and toast notifications can use different styles but you should never mix styles within the variations.\n\n<Row>\n<Column colLg={8}>\n\n![High vs. low contrast](images/notification-usage-4.png)\n\n</Column>\n</Row>\n\n## Placement\n\n#### Toast notifications\n\nToast notifications slide in and out a page from the top-right corner. Actionable notifications do not appear on mobile screen widths.\n\n<Row>\n<Column colLg={8}>\n\n![Toast notification example](images/notification-usage-2.png)\n\n</Column>\n</Row>\n\n#### Inline notifications\n\nInline notifications appear near its related item. In [forms](/components/form/code), we recommend placing the inline notification at the bottom of the form, right before the submission buttons. Depending on the context of the page, inline notifications can appear above the content as well.\n\n<Row>\n<Column colLg={8}>\n\n![Form example with inline notification](images/notification-usage-3.png)\n\n</Column>\n</Row>\n","fileAbsolutePath":"/zeit/3eb073a4/src/pages/components/notification/usage.mdx"}}}}