Toasts

Experimental

Toasts are used to show live, time-sensitive feedback to users.

Default

To create a default toast, use .Toast. Always use the info icon for default messages.

The Toast content is formattable. We recommend keeping your message under 140 characters.

Variations

Use the success, warning, and error modifiers to communicate different states.

Always use the check octicon for success states.

Always use the alert octicon for warning states.

Always use the stop octicon for error states.

Toast with dismiss

Use .Toast-dismissButton to allow a user to explicitly dismiss a Toast.

Include a link to allow users to take actions within a Toast.

Toast animation in

The Toast--animateIn and Toast--animateOut modifier classes can be used to animate the toast in and out from the bottom.

Toast with loading animation

Add the Toast--spinner modifier class on the Toast-icon svg to communicate a loading state.

Toast position

Use the position-fixed bottom-0 left-0 utility classes on a wrapper element to position Toasts at the bottom left of the viewport.

Edit this page on GitHub
1 contributorcolebemis
Last edited by colebemis on August 14, 2019