1 # Toasts 2 Use a toast message to indicate the status of a user action. For example, a user saves a form successfully, a toast message with the `success` variant is displayed. If the user action was not successful, a toast message with the `danger` variant is displayed. 3 4 There are different transitions for the toast messages. The `success` toast message will auto-hide after 10 seconds. The user must manually dismiss the `informational`, `warning`, and `error` toast messages. The `BVToastMixin` provides a simple API that generates a toast message that meets the transition guidelines. 5 6 <img src="./toast.png" alt="Toast message examples" style="max-width:350px"> 7 8 ```js{5} 9 // Sample method from Reboot BMC page 10 rebootBmc() { 11 this.$store 12 .dispatch('controls/rebootBmc') 13 .then(message => this.successToast(message)) 14 .catch(({ message }) => this.errorToast(message)); 15 } 16 17 // Methods used in this example 18 methods: { 19 makeSuccessToast() { 20 this.successToast('This is a success toast and will be dismissed after 10 seconds.'); 21 }, 22 makeErrorToast() { 23 this.errorToast('This is an error toast and must be dismissed by the user.'); 24 }, 25 makeWarningToast() { 26 this.warningToast('This is a warning toast and must be dismissed by the user.'); 27 }, 28 makeInfoToast() { 29 this.infoToast('This is an info toast and must be dismissed by the user.'); 30 }, 31 } 32 ```