# 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 | - | - |