SearchBox: Provide a 'secondary' style

daniel-ac-martin · Jan 5, 2025 · 20f8ae5 · 20f8ae5 · github-actions · Jan 5, 2025
1 parent b56afb5
commit 20f8ae5
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/components/search-box/assets/SearchBox.scss b/components/search-box/assets/SearchBox.scss
@@ -55,7 +55,7 @@
     transform: scale(0.5);
   }
 
-  &--hods {
+  &--secondary {
     .not-govuk-standalone-input__button {
       background-color: govuk-colour("light-grey");
       color: govuk-colour("black");

diff --git a/components/search-box/spec/SearchBox.stories.mdx b/components/search-box/spec/SearchBox.stories.mdx
@@ -114,5 +114,16 @@ Currently errors are visually hidden, so it is best to avoid them. They will how
 </Preview>
 
 
+### Secondary button
+
+A search box with a more subtle, grey button, similar to the 'secondary' button style.
+
+<Preview>
+  <Story name="Secondary">
+    <SearchBox name="q" classModifiers="secondary" />
+  </Story>
+</Preview>
+
+
 [Search component]: https://components.publishing.service.gov.uk/component-guide/search
 [GOV.UK Component Guide]: https://components.publishing.service.gov.uk/component-guide