Add new toasts examples (#30572)

* Add two new toasts examples

- Adds a new custom content example that removes the toast header and adds a custom close icon
- Adds docs for how to create your own color schemes
- Adds example of additional buttons

* Update toasts examples

- Remove span and place aria on SVG element
- Add .border-0 to color scheme example for crisper edges

* Update toasts.md

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index 1fd3f9971e7e256fe04a35b0499d16316ff6b8ae..33b2cba199151bd5a213edc89a45531cb4c9dbce 100644 (file)
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -98,6 +98,56 @@ When you have multiple toasts, we default to vertically stacking them in a reada
 </div>
 {{< /example >}}
 
+### Custom content
+
+Customize your toasts by removing sub-components, tweaking with [utilities]({{< docsref "/utilities/api" >}}), or adding your own markup. Here we've created a simpler toast by removing the default `.toast-header`, adding a custom hide icon from [Bootstrap Icons](https://icons.getbootstrap.com), and using some [flexbox utilities]({{< docsref "/utilities/flex" >}}) to adjust the layout.
+
+{{< example class="bg-light" >}}
+<div class="toast d-flex" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast-body">
+    Hello, world! This is a toast message.
+  </div>
+  <button type="button" class="ml-auto p-2 close" data-dismiss="toast" aria-label="Close">
+    <svg class="bi bi-x" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z" clip-rule="evenodd"/>
+      <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
+    </svg>
+  </button>
+</div>
+{{< /example >}}
+
+Alternatively, you can also add additional controls and components to toasts.
+
+{{< example class="bg-light" >}}
+<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast-body">
+    Hello, world! This is a toast message.
+    <div class="mt-2 pt-2 border-top">
+      <button type="button" class="btn btn-primary btn-sm">Take action</button>
+      <button type="button" class="btn btn-secondary btn-sm" data-dismiss="toast">Close</button>
+    </div>
+  </div>
+</div>
+{{< /example >}}
+
+### Color schemes
+
+Building on the above example, you can create different toast color schemes with our [color utilities]({{< docsref "/utilities/colors" >}}). Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.text-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
+
+{{< example class="bg-light" >}}
+<div class="toast d-flex text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
+  <div class="toast-body">
+    Hello, world! This is a toast message.
+  </div>
+  <button type="button" class="ml-auto p-2 close text-white" data-dismiss="toast" aria-label="Close">
+    <svg class="bi bi-x" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
+      <path fill-rule="evenodd" d="M11.854 4.146a.5.5 0 010 .708l-7 7a.5.5 0 01-.708-.708l7-7a.5.5 0 01.708 0z" clip-rule="evenodd"/>
+      <path fill-rule="evenodd" d="M4.146 4.146a.5.5 0 000 .708l7 7a.5.5 0 00.708-.708l-7-7a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
+    </svg>
+  </button>
+</div>
+{{< /example >}}
+
 ## Placement
 
 Place toasts with custom CSS as you need them. The top right is often used for notifications, as is the top middle. If you're only ever going to show one toast at a time, put the positioning styles right on the `.toast`.