Prose v0

Notifications

Components

Toasts

Accessibility requirements coming soon...

  • 🎉 toast in the bottom center on desktop and mobile.
    • Offset 16px from top/bottom
  • Multiple toasts should be stacked with 8px spacing/gap
  • max-width: 320px
  • role="status" aria-live="polite"
  • Transitions:
    • IN
      • scale(.95) to (1)
      • opacity: 0 to 1
      • duration: 150ms
    • OUT
      • scale(1) to (.95)
      • opacity: 1 to 0
      • duration: 75ms
    • TIMING/EASING
      • cubic-bezier(0.4, 0.0, 0.2, 1)
  • Remove (🔥) toast after 3000ms (timer should be increased depending on the message length)
  • onMouseMove over toast should pause 🔥 timer

Alerts

Info

Success

Warning

Error

Usage Notes

  • Notification banners appear centered at the top of the content area, underneath any navigation headers.
  • For persistent alerts, hide the X icon.
  • For temporary alerts leave the X icon visible.
  • Icons are recommended but can be hidden if necessary.

Tooltips

Top
Top
Bottom
Bottom
Left
Left
Right
Right

Usage Guidelines

Tooltips appear on hover on systems where a hover and focus is possible (i.e. desktops, laptops). Tooltips should be placed to not interfere with any content the user needs to see while the tooltip is open, as there is no way for the user to change the position of the tooltip. On mobile devices tooltips appear on tapping the trigger text and hide on tapping outside of the tooltip. Ideally the position of the tooltip should adjust to the viewport position on scroll and resize. The following example does just that (using Tippy):

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed massa metus, tempus sit amet rhoncus nec, suscipit et ligula. Donec in sem libero, quis dapibus nisi. Nunc bibendum ultrices tellus sed molestie. Donec venenatis, quam non fringilla congue, nisl nisl eleifend nibh, et pellentesque lorem turpis et erat. Nulla ac nisi odio, in rhoncus urna.