Mybranch (viamrobotics#533)

packages/docs/src/pages/patterns/links.mdx

@@ -0,0 +1,4 @@
+---
+layout: ../../layouts/DocsLayout.astro
+title: Links
+---

packages/docs/src/pages/patterns/toasts-vs-notifications.mdx

@@ -0,0 +1,16 @@
+---
+layout: ../../layouts/DocsLayout.astro
+title: Toasts vs Notifications
+---
+# Should I use Notification, Banner, or Toast?
+
+![Untitled](/toasts-vs-notifications/toasts-vs-notifications-flowchart.jpg)
+
+| Component   | Description | Usage | Examples |
+| -------- | ------- | -------- | ------- |
+| Notification  | Appears in the top right corner. <br/><br/> Grabs the users attention and may disrupt their current workflow. | Use for critical events, especially ones that require user action, or when the message cannot be made concise. |<ul><li>System error</li><li>information about payment</li></ul> |
+| Banner (Inline) | Fixed inline with page content. <br/><br/> Grabs the user’s attention and does not disappear until action is taken. | Use to communicate information that directly pertains to page content. | <ul><li>Payment info required</li><li>Warning or info messages about certain resource types</li><li>Complex form errors (beyond a single input)</li></ul>  |
+| Toast | Appears temporarily in the bottom center. <br/><br/> Provide system feedback without interrupting the user’s workflow. | Use for non-critical system feedback. | <ul><li>Created a new resource</li><li>Copied something to the clipboard </li><li>Saved changes</li><li>Deleted a (non-critical) resource</li></ul>  |
+
+
+![Untitled](/toasts-vs-notifications/notification-banner-toast-thumbnails.png)