# Toast

Display a toast message globally.

# When to use

To display a toast message at any of the four corners of the viewport. Typically it can be used in the following cases:

A notification with complex content.

A notification providing a feedback based on the user interaction. Or it may show some details about upcoming steps the user may have to follow.

A notification that is pushed by the application.

# Usage

<template>
	<su-button class="button button-blue" @click.native="successToast">Open success toast</su-button>
</template>

<script>
export default {
    methods: {
		successToast: function () {
			this.$toast.success({
				message: "I am a toast with success message",
				orientation: this.$toast.TOP_RIGHT,
				duration: 4000
			})
		}
	}
}
</script>





Property Description Type Accepted values Default
type Type of toast Function success, info, warning, error -
message Content of toast String - -
duration Duration of the notification String - 3000(ms)
orientation Position of Notification, can be like this.$toast.TOP_RIGHT Object - -