Toasts

Toast notifications communicate acknowledgements and alerts that require minimal user interaction. Toasts appear fixed to the bottom left corner of the screen.

Noun + verb

            HTML
            
                Copy
            
        

            
<div class="qw-toast qw-toast_neutral fadeToast" role="status">
    <div class="toast-content">
        <p>Noun + verb</p>
        <button class="btn-icon btn-icon-sm btn-icon-toast">
            <svg class="qw-icon-inline" viewBox="0 0 24 24" aria-hidden="true">
                <use xlink:href="#qw-icon-close"></use>
                <title>Close</title>
            </svg>
        </button>
    </div>
</div>
            
        

Usage

Toast notifications are used when:

The user does not need to be interrupted.
The user is being informed of an event, with the option to take action.
The results of an action are delayed.

Toasts should:

Be brief (3 words or less, ideally)
Rarely used for error messages
Appear 1 at a time

If you’re providing a ton of detail on something not immediately relevant, consider a different component or method.

Notifications should contain role="status" on the containere to signal to assistive technology that they require the user's attention. Role of status indicates a polite live region which does not clear the screen reader's speech queue.

Duration

By default, toasts expire and fade to zero after 8 seconds. This expiration is extended when focus is placed within the toast, or the user hovers their mouse over it.

Variants

Info (Default)

Comunicates operational information to the user. These are commonly used to denote the start of an operation and usually includes follow up notifications. Add class .qw-toast-info.

Cycle closed

Success

Communicates the success of an operation, e.g. a long running process has finished.Add class .qw-toast-success.

Message sent

Critical/Error

Toast errors are when an operation was unable to be performed or has failed. Page-specific and form errors should utilize other components or methods.Add class .qw-toast-danger.

Data not saved