1# Toasts 2 3Use a toast message to indicate the status of a user action. For example, a user 4saves a form successfully, a toast message with the `success` variant is 5displayed. If the user action was not successful, a toast message with the 6`danger` variant is displayed. 7 8There are different transitions for the toast messages. The `success` toast 9message will auto-hide after 10 seconds. The user must manually dismiss the 10`informational`, `warning`, and `error` toast messages. The `BVToastMixin` 11provides a simple API that generates a toast message that meets the transition 12guidelines. 13 14 15 16```js{5} 17// Sample method from Reboot BMC page 18rebootBmc() { 19 this.$store 20 .dispatch('controls/rebootBmc') 21 .then(message => this.successToast(message)) 22 .catch(({ message }) => this.errorToast(message)); 23} 24 25// Methods used in this example 26methods: { 27 makeSuccessToast() { 28 this.successToast('This is a success toast and will be dismissed after 10 seconds.'); 29 }, 30 makeErrorToast() { 31 this.errorToast('This is an error toast and must be dismissed by the user.'); 32 }, 33 makeWarningToast() { 34 this.warningToast('This is a warning toast and must be dismissed by the user.'); 35 }, 36 makeInfoToast() { 37 this.infoToast('This is an info toast and must be dismissed by the user.'); 38 }, 39} 40``` 41 42## Additional options 43 44The first argument for each method will be the toast body content. It accepts a 45string value or an array of strings for toasts needing to display multiple lines 46of content. 47 48The BVToastMixin also accepts additional options as a second argument. Pass an 49object with a `title` property to change the default toast title. Include a 50`refreshAction` property, set to true, to include a link that refreshes the 51application. Include a `timestamp` property, set to true, to include a timestamp 52in the toast. 53 54 55 56```js 57 58methods: { 59 makeInfoToast() { 60 this.infoToast([ 61 'This is a toast with multi-lined body content.', 62 'Just pass an array of strings!' 63 ], { 64 title: 'This is an example', 65 refreshAction: true, 66 timestamp: true 67 }) 68 } 69} 70``` 71
