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

• Vanilla: Toast notifications (new component) vanilla-pattern-library#235
• Bootstrap: Toast notifications (new component) bootstrap#463
• Angular: Toast notifications (new component) ng-components#534
• AngularMaterial: Toast notifications (new component) seb-angular-material#123
• React: Toast notifications (new component) react-components#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.