ENH: Add search button that looks like field

src/pydata_sphinx_theme/assets/styles/components/_search.scss

@@ -119,3 +119,33 @@
     font-size: var(--pst-font-size-icon);
   }
 }
+
+/**
+ * The search button component that looks like a field.
+ * Lives at components/search-button-field.html
+ */
+.search-button-field {
+  display: inline-flex;
+  align-items: center;
+  border: var(--pst-color-border) solid 1px;
+  padding: 0.5rem;
+  border-radius: 1.5rem;
+  color: var(--pst-color-text-muted);
+
+  &:hover,
+  &:focus {
+    background-color: var(--pst-color-surface);
+    border-color: var(--pst-color-primary);
+  }
+
+  // Magnifying glass icon
+  i {
+    padding: 0 0.5rem;
+  }
+
+  // The keyboard shotcut text
+  .search-button__kbd-shortcut {
+    font-size: 1.25rem;
+    margin-right: 0.5rem;
+  }
+}

src/pydata_sphinx_theme/theme/pydata_sphinx_theme/components/search-button-field.html

@@ -0,0 +1,13 @@
+{# Behaves the same as `search-button.html` but looks more like a search field.
+  #
+  # As this function will only work when JavaScript is enabled, we add it through JavaScript.
+  #}
+ <script>
+ document.write(`
+   <button class="btn navbar-btn search-button-field search-button__button" title="{{ _('Search') }}" aria-label="{{ _('Search') }}" data-bs-placement="bottom" data-bs-toggle="tooltip">
+    <i class="fa-solid fa-magnifying-glass"></i>
+    <span class="search-button__kbd-shortcut">{{ _('Search') }}</span>
+    <kbd class="kbd-shortcut__modifier">Ctrl</kbd>+<kbd>K</kbd>
+   </button>
+ `);
+ </script>