diff options
Diffstat (limited to 'site/content/docs/5.2/components/close-button.md')
| -rw-r--r-- | site/content/docs/5.2/components/close-button.md | 14 |
1 files changed, 10 insertions, 4 deletions
diff --git a/site/content/docs/5.2/components/close-button.md b/site/content/docs/5.2/components/close-button.md index f4a3ed071..39b80e1cd 100644 --- a/site/content/docs/5.2/components/close-button.md +++ b/site/content/docs/5.2/components/close-button.md @@ -22,13 +22,19 @@ Disabled close buttons change their `opacity`. We've also applied `pointer-event <button type="button" class="btn-close" disabled aria-label="Close"></button> {{< /example >}} -## White variant +## Dark variant -Change the default `.btn-close` to be white with the `.btn-close-white` class. This class uses the `filter` property to invert the `background-image`. +{{< callout info >}} +**Heads up!** As of v5.3.0, the `.btn-close-white` class is deprecated. Instead, use `data-bs-theme="dark"` to change the color mode of the close button. +{{< /callout >}} + +Add `data-bs-theme="dark"` to the `.btn-close`, or to its parent element, to invert the close button. This uses the `filter` property to invert the `background-image` without overriding its value. {{< example class="bg-dark" >}} -<button type="button" class="btn-close btn-close-white" aria-label="Close"></button> -<button type="button" class="btn-close btn-close-white" disabled aria-label="Close"></button> +<div data-bs-theme="dark"> + <button type="button" class="btn-close" aria-label="Close"></button> + <button type="button" class="btn-close" disabled aria-label="Close"></button> +</div> {{< /example >}} ## Sass |