diff --git a/includes/SkinVector.php b/includes/SkinVector.php
index e664dc9..2148bec 100644
--- a/includes/SkinVector.php
+++ b/includes/SkinVector.php
@@ -420,7 +420,13 @@ class SkinVector extends SkinMustache {
 		// At lower resolutions the search input is hidden search and only the submit button is shown.
 		// It should behave like a form submit link (e.g. submit the form with no input value).
 		// We'll wire this up in a later task T284242.
-		$searchBoxData['href-search'] = Title::newFromText( $searchBoxData['page-title'] )->getLocalUrl();
+		$searchBoxData['data-collapse-icon'] = [
+			'href' => Title::newFromText( $searchBoxData['page-title'] )->getLocalUrl(),
+			'label' => $this->msg( 'search' ),
+			'icon' => 'wikimedia-search',
+			'is-quiet' => true,
+			'class' => 'search-toggle',
+		];
 
 		return $searchBoxData;
 	}
diff --git a/includes/templates/SearchBox.mustache b/includes/templates/SearchBox.mustache
index 70e6eba..f89039b 100644
--- a/includes/templates/SearchBox.mustache
+++ b/includes/templates/SearchBox.mustache
@@ -24,9 +24,8 @@
 		</form>
 	</div>
 	{{#is-collapsible}}
-	<a class="mw-ui-button mw-ui-quiet mw-ui-icon mw-ui-icon-wikimedia-search mw-ui-icon-element search-toggle"
-		href="{{href-search}}">
-		<span>{{msg-search}}</span>
-	</a>
+	{{#data-collapse-icon}}
+	{{>Button}}
+	{{/data-collapse-icon}}
 	{{/is-collapsible}}
 </div>
diff --git a/stories/SearchBox.stories.data.js b/stories/SearchBox.stories.data.js
index 4fe8f56..95efcc8 100644
--- a/stories/SearchBox.stories.data.js
+++ b/stories/SearchBox.stories.data.js
@@ -3,6 +3,7 @@
  */
 
 import searchBoxTemplate from '!!raw-loader!../includes/templates/SearchBox.mustache';
+import Button from '!!raw-loader!../includes/templates/Button.mustache';
 import { htmlUserLanguageAttributes } from './utils';
 
 /**
@@ -25,10 +26,21 @@ const legacySearchBoxData = {
 const searchBoxData = Object.assign( {}, legacySearchBoxData, {
 	class: 'vector-search-box vector-search-show-thumbnail vector-search-box-collapses',
 	'is-collapsible': true,
-	'href-search': '/wiki/Special:Search'
+	'data-collapse-icon': {
+		icon: 'wikimedia-search',
+		'is-quiet': true,
+		class: 'search-toggle',
+		href: '/wiki/Special:Search',
+		label: 'Search'
+	}
 } );
 
+const SEARCH_TEMPLATE_PARTIALS = {
+	Button
+};
+
 export {
+	SEARCH_TEMPLATE_PARTIALS,
 	searchBoxTemplate,
 	legacySearchBoxData,
 	searchBoxData
diff --git a/stories/SearchBox.stories.js b/stories/SearchBox.stories.js
index 9d81022..028939b 100644
--- a/stories/SearchBox.stories.js
+++ b/stories/SearchBox.stories.js
@@ -1,16 +1,18 @@
 import mustache from 'mustache';
 import '../resources/skins.vector.styles/SearchBox.less';
 import '../resources/skins.vector.styles/layouts/screen.less';
-import { searchBoxData, legacySearchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
+import { searchBoxData, legacySearchBoxData, searchBoxTemplate,
+	SEARCH_TEMPLATE_PARTIALS
+} from './SearchBox.stories.data';
 
 export default {
 	title: 'SearchBox'
 };
 
 export const legacySimpleSearch = () => `
-	${mustache.render( searchBoxTemplate, legacySearchBoxData )}
+	${mustache.render( searchBoxTemplate, legacySearchBoxData, SEARCH_TEMPLATE_PARTIALS )}
 `;
 
 export const simpleSearch = () => `
-	${mustache.render( searchBoxTemplate, searchBoxData )}
+	${mustache.render( searchBoxTemplate, searchBoxData, SEARCH_TEMPLATE_PARTIALS )}
 `;
diff --git a/stories/skin.stories.data.js b/stories/skin.stories.data.js
index 83a15ac..e4eba7c 100644
--- a/stories/skin.stories.data.js
+++ b/stories/skin.stories.data.js
@@ -10,7 +10,7 @@ import { menuTemplate } from './Menu.stories.data';
 import { PERSONAL_MENU_TEMPLATE_DATA } from './UserLinks.stories.data';
 import { pageActionsData, namespaceTabsData } from './MenuTabs.stories.data';
 import { vectorMenuTemplate, moreData, variantsData } from './MenuDropdown.stories.data';
-import { searchBoxData, searchBoxTemplate } from './SearchBox.stories.data';
+import { searchBoxData, searchBoxTemplate, SEARCH_TEMPLATE_PARTIALS } from './SearchBox.stories.data';
 import { SIDEBAR_DATA, SIDEBAR_TEMPLATE_PARTIALS, OPT_OUT_DATA,
 	sidebarLegacyTemplate, sidebarTemplate } from './Sidebar.stories.data';
 import { FOOTER_TEMPLATE_DATA, FOOTER_TEMPLATE_PARTIALS,
@@ -65,7 +65,7 @@ export const TEMPLATE_PARTIALS = Object.assign( {}, SIDEBAR_TEMPLATE_PARTIALS, {
 	Menu: menuTemplate,
 	'legacy/UserLinks': userLinksTemplateLegacy,
 	Footer: footerTemplate
-}, FOOTER_TEMPLATE_PARTIALS );
+}, FOOTER_TEMPLATE_PARTIALS, SEARCH_TEMPLATE_PARTIALS );
 
 /**
  * @type {Indicator[]}