Alerts - Examples in Use

Toast

Go to component

The Toast component provides brief feedback about an operation through a message at the bottom of the screen. Toast is only used to display additional confirmation of an action, but never information that is vital to the user.

Notification

Go to component

Notification is primarily used for system and account notifications. The Success variant is used to show a confirmation of a task, or an update to the user's account, which the user needs to be made aware of. The Error variant should be used when there is a problem that requires the user's immediate attention such as an account issue or unsuccessful action.

Modal

Go to component

Modals are used to grab the user’s full attention and requires people to focus on a single task before continuing. It appears on top of the main content and temporarily disables all other page contents until it is dismissed by closing or an action.

Modal as a prompt

The Modal can be used to display contextual or global information that the user should be made aware of directly.

Modal for additional content

The Modal can be used to display additional information that the user is able to access if they are interested to learn more about a certain topic without having to leave the page.

Banner

The Banner is used to promote offers temporarily. This component is not yet available, but will be added to Sky UI in the future.

Inline Alert

The Inline Alert is a versatile UI component designed to display important messages, notifications, and feedback directly within the body of a page’s content.