Independently style "Switch to stable version" link

docs/user_guide/web-components.rst

@@ -4,16 +4,31 @@
 Sphinx Design Components
 ========================
 
-The PyData Sphinx Theme uses `sphinx-design <https://sphinx-design.readthedocs.io/en/latest/index.html>`__
-to add several UI components and provide extra flexibility for content creation.
-These include badges, buttons, cards, and tabs, among other components.
-This theme provides custom CSS to ensure that `sphinx-design <https://sphinx-design.readthedocs.io/en/latest/index.html>`__ elements look and feel consistent with this theme.
+On this page, you will find user interface components such as badges, buttons,
+cards, and tabs.
+
+The components on this page are **not provided by PyData Theme**. They are
+provided by a Sphinx extension called Sphinx Design. This means that if you wish
+to use the components on this page, you must install Sphinx Design separately.
 
 .. seealso::
 
-    For more information about how to use these extensions, see `the sphinx-design documentation <https://sphinx-design.readthedocs.io/en/latest/index.html>`_.
+    To add the Sphinx Design extension to your Sphinx project, refer to `Sphinx
+    Design - Getting Started
+    <https://sphinx-design.readthedocs.io/en/pydata-theme/get_started.html>`_.
+
+Contributors to both projects have worked to ensure compatible styling so that
+Sphinx Design components look and feel consistent with the PyData Theme.
+
+This page shows you how the Sphinx Design components would look on your site if
+you were to use them in combination with the PyData Theme. Sphinx Design also
+provides a `PyData-themed version of the Sphinx Design site
+<https://sphinx-design.readthedocs.io/en/pydata-theme/>`__; however, their site
+use an older version of this theme.
 
-Below you can find some examples of the components created with the :code:`sphinx-design` extension.
+Any customizations you make to the theme could affect how these components
+appear on your site. So what you see on this page might not match exactly what
+you see on your site even if your site uses this theme.
 
 .. _badges-buttons:
 

src/pydata_sphinx_theme/assets/scripts/pydata-sphinx-theme.js

@@ -489,7 +489,7 @@ function showVersionWarningBanner(data) {
   middle.classList = "bd-header-announcement__content";
   inner.classList = "sidebar-message";
   button.classList =
-    "sd-btn sd-btn-danger sd-shadow-sm sd-text-wrap font-weight-bold ms-3 my-1 align-baseline";
+    "btn text-wrap font-weight-bold ms-3 my-1 align-baseline button-link-to-stable-version";
   button.href = `${preferredURL}${DOCUMENTATION_OPTIONS.pagename}.html`;
   button.innerText = "Switch to stable version";
   button.onclick = checkPageExistsAndRedirect;

src/pydata_sphinx_theme/assets/styles/sections/_announcement.scss

@@ -33,6 +33,31 @@
   a {
     color: var(--pst-color-inline-code-links);
   }
+
+  // The "Switch to stable version" link (styled like a button)
+  .button-link-to-stable-version {
+    @include box-shadow();
+
+    $background-color: var(--pst-color-danger);
+    $hover-background-color: var(--pst-color-danger-highlight);
+    $color: var(--pst-color-heading-color);
+
+    background-color: $background-color;
+    border-color: $background-color;
+    color: $color;
+    border-radius: 0.25rem;
+
+    &:hover {
+      background-color: $hover-background-color;
+      border-color: $hover-background-color;
+      color: $color;
+    }
+
+    &:focus-visible {
+      outline: $focus-ring-width solid $background-color;
+      outline-offset: $focus-ring-width;
+    }
+  }
 }
 
 // Bg color is now defined in the theme color palette - using our secondary color