Toast

Toast is used to display messages over the top of the conent as an overlay.

Variants

There are 3 different sized varients of toast provided in GEL. Info, Success and Error.

Demo

Guidance

• Toast messages are displayed for a short amount of time and gets hidden after a short amount of time.
• Toast messages can also be closed manually by clicking the closing icon.
• All Toast messages should be accompanied with an icon and text.
• Multiple toast messages can be stacked like a list with gaps between the messages but never overlap each other.

When to use

• Use toast to provide contextual message based on a user's action in the same view the action took place.
• Use toast if the message can be displayed for a short amount of time.

When not to use

• If you need to communicate an error to a user that impact the user from moving forward, consider using a danger or warning alert instead.
• If there's a page refresh, or a message needs to be communicated after a user visits a new page, consider using an alert instead.
• If the action is irreversible, consider using a modal instead.

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP