chore(docs): add example for <b-toast> with custom close button (#5864)

jacobmllr95 · web-flow · commit 58cd20763973 · 2020-10-07T13:54:52.000+02:00
diff --git a/src/components/toast/README.md b/src/components/toast/README.md
@@ -272,6 +272,58 @@ When auto-hide is enabled, hovering over the toast will pause the auto-hide time
 the toast, the auto-hide timer will be resumed. You can disable this feature by setting the
 `no-hover-pause` prop to `true`.
 
+### Close button
+
+Toasts have a close button to hide them on use click by default. Setting the `no-close-button` prop
+to `true` will prevent this and creates a toast without the default close button.
+
+It is still possible to create a custom close button for the toast by providing a unique ID and use
+the `this.$bvToast.hide(id)` method to hide the specific toast:
+
+```html
+<template>
+  <div>
+    <b-button @click="showToast">Show Toast</b-button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        count: 0
+      }
+    },
+    methods: {
+      showToast() {
+        // Use a shorter name for `this.$createElement`
+        const h = this.$createElement
+        // Create a ID with a incremented count
+        const id = `my-toast-${this.count++}`
+
+        // Create the custom close button
+        const $closeButton = h(
+          'b-button',
+          {
+            on: { click: () => this.$bvToast.hide(id) }
+          },
+          'Close'
+        )
+
+        // Create the toast
+        this.$bvToast.toast([$closeButton], {
+          id: id,
+          title: `Toast ${this.count}`,
+          noCloseButton: true
+        })
+      }
+    }
+ }
+</script>
+
+<!-- toasts-advanced.vue -->
+```
+
 ### Toast roles
 
 Toasts are rendered with a default `role` attribute of `'alert'` and `aria-live` attribute of
@@ -428,7 +480,7 @@ for generating more complex toast content:
 ```html
 <template>
   <div>
-    <b-button @click="popToast">Show Toast with custom content</b-button>
+    <b-button @click="showToast">Show Toast with custom content</b-button>
   </div>
 </template>
 
@@ -440,7 +492,7 @@ for generating more complex toast content:
       }
     },
     methods: {
-      popToast() {
+      showToast() {
         // Use a shorter name for this.$createElement
         const h = this.$createElement
         // Increment the toast count
