Use a streamlined way to trigger component dismiss (#34170)

* use a streamlined way to trigger component dismiss

* add documentation

Co-authored-by: XhmikosR <[email protected]>

4 files changed, 16 insertions, 21 deletions

diff --git a/site/content/docs/5.0/components/alerts.md b/site/content/docs/5.0/components/alerts.md
index e3862de48..338976323 100644
--- a/site/content/docs/5.0/components/alerts.md
+++ b/site/content/docs/5.0/components/alerts.md
@@ -204,17 +204,7 @@ See the [triggers](#triggers) section for more details.
 
 ### Triggers
 
-Dismissal can be achieved with `data` attributes on a button **within the alert** as demonstrated above:
-
-```html
-<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-```
-
-or on a button **outside the alert** using the `data-bs-target` as demonstrated above:
-
-```html
-<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>
-```
+{{% js-dismiss "alert" %}}
 
 **Note that closing an alert will remove it from the DOM.**
 
diff --git a/site/content/docs/5.0/components/modal.md b/site/content/docs/5.0/components/modal.md
index 7ba55b3b5..56fad0297 100644
--- a/site/content/docs/5.0/components/modal.md
+++ b/site/content/docs/5.0/components/modal.md
@@ -840,17 +840,8 @@ Activate a modal without writing JavaScript. Set `data-bs-toggle="modal"` on a c
 ```
 #### Dismiss
 
-Dismissal can be achieved with `data` attributes on a button **within the modal** as demonstrated below:
+{{% js-dismiss "modal" %}}
 
-```html
-<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-```
-
-or on a button **outside the modal** using the `data-bs-target` as demonstrated below:
-
-```html
-<button type="button" class="btn-close" data-bs-dismiss="modal" data-bs-target="#my-modal" aria-label="Close"></button>
-```
 {{< callout warning >}}
 While both ways to dismiss a modal are supported, keep in mind that dismissing from outside a modal does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk.
 {{< /callout >}}
diff --git a/site/content/docs/5.0/components/offcanvas.md b/site/content/docs/5.0/components/offcanvas.md
index d0c60db2b..c28e005e6 100644
--- a/site/content/docs/5.0/components/offcanvas.md
+++ b/site/content/docs/5.0/components/offcanvas.md
@@ -194,8 +194,18 @@ Add a dismiss button with the `data-bs-dismiss="offcanvas"` attribute, which tri
 
 ### Via data attributes
 
+#### Toggle
+
 Add `data-bs-toggle="offcanvas"` and a `data-bs-target` or `href` to the element to automatically assign control of one offcanvas element. The `data-bs-target` attribute accepts a CSS selector to apply the offcanvas to. Be sure to add the class `offcanvas` to the offcanvas element. If you'd like it to default open, add the additional class `show`.
 
+#### Dismiss
+
+{{% js-dismiss "offcanvas" %}}
+
+{{< callout warning >}}
+While both ways to dismiss an offcanvas are supported, keep in mind that dismissing from outside an offcanvas does not match [the WAI-ARIA modal dialog design pattern](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). Do this at your own risk.
+{{< /callout >}}
+
 ### Via JavaScript
 
 Enable manually with:
diff --git a/site/content/docs/5.0/components/toasts.md b/site/content/docs/5.0/components/toasts.md
index dc9501b67..d17d8b3df 100644
--- a/site/content/docs/5.0/components/toasts.md
+++ b/site/content/docs/5.0/components/toasts.md
@@ -341,6 +341,10 @@ var toastList = toastElList.map(function (toastEl) {
 })
 ```
 
+### Triggers
+
+{{% js-dismiss "toast" %}}
+
 ### Options
 
 Options can be passed via data attributes or JavaScript. For data attributes, append the option name to `data-bs-`, as in `data-bs-animation=""`.