Toast notification

[conandx]

Design decision 2020-10-22

What is this? A small message that shows up in a box at the bottom of the screen and can disappear on its own after few seconds.

Details See the full specification here https://designlibrary.sebgroup.com/components/component-toast-notifications

Component identifier component-toastnotifications

Reasoning This component can be found in SEB Bootstrap but only recently got an approved SEB-design and description in Design Library.

Follow up on development

• [x] Vanilla: https://github.com/sebgroup/vanilla-pattern-library/issues/235
• [x] Bootstrap: https://github.com/sebgroup/bootstrap/issues/463
• [ ] Angular: https://github.com/sebgroup/ng-components/issues/534
• [ ] AngularMaterial: https://github.com/sebgroup/seb-angular-material/issues/123
• [ ] React: https://github.com/sebgroup/react-components/issues/488

Thank you! /Ulrika :)

[ulde01]

https://designlibrary.sebgroup.com/components/alerts/toast-notifications/

[conandx]

• We have yet to explain positioning on the screen.... I vote for bottom right, or perhaps bottom centered.
• When to use? is how does it relate to error-messages, alert-ribbon or perhaps a receipt?

[ghost]

There are updated design in the Alert master document! But needs some pixels moved in the symbols made some time ago... 😃Also great if we ad the smart layout on the components. For example the line height on the text should be 20 not 24, therefore need to adjust the height on the background.