diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.html b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.html
new file mode 100644
index 0000000..1b140da
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.html
@@ -0,0 +1,50 @@
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<link rel="import" href="../../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../../styles/shared-styles.html">
+<link rel="import" href="../../shared/gr-button/gr-button.html">
+<link rel="import" href="../../shared/gr-rest-api-interface/gr-rest-api-interface.html">
+
+<dom-module id="gr-diff-mode-selector">
+  <template>
+    <style include="shared-styles">
+      gr-button.selected iron-icon {
+        color: var(--color-link);
+      }
+    </style>
+    <gr-button
+        id="sideBySideBtn"
+        link
+        has-tooltip
+        class$="[[_computeSelectedClass(mode, _VIEW_MODES.SIDE_BY_SIDE)]]"
+        title="Side-by-side diff"
+        on-tap="_handleSideBySideTap"><!--
+   --><iron-icon icon="gr-icons:side-by-side"></iron-icon><!--
+ --></gr-button>
+    <gr-button
+        id="unifiedBtn"
+        link
+        has-tooltip
+        title="Unified diff"
+        class$="[[_computeSelectedClass(mode, _VIEW_MODES.UNIFIED)]]"
+        on-tap="_handleUnifiedTap"><!--
+   --><iron-icon icon="gr-icons:unified"></iron-icon><!--
+ --></gr-button>
+    <gr-rest-api-interface id="restAPI"></gr-rest-api-interface>
+  </template>
+  <script src="gr-diff-mode-selector.js"></script>
+</dom-module>
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.js b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.js
new file mode 100644
index 0000000..6c3a713
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector.js
@@ -0,0 +1,68 @@
+// Copyright (C) 2018 The Android Open Source Project
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+(function() {
+  'use strict';
+
+  Polymer({
+    is: 'gr-diff-mode-selector',
+
+    properties: {
+      mode: {
+        type: String,
+        notify: true,
+      },
+
+      /**
+       * If set to true, the user's preference will be updated every time a
+       * button is tapped. Don't set to true if there is no user.
+       */
+      saveOnChange: {
+        type: Boolean,
+        value: false,
+      },
+
+      /** @type {?} */
+      _VIEW_MODES: {
+        type: Object,
+        readOnly: true,
+        value: {
+          SIDE_BY_SIDE: 'SIDE_BY_SIDE',
+          UNIFIED: 'UNIFIED_DIFF',
+        },
+      },
+    },
+
+    /**
+     * Set the mode. If save on change is enabled also update the preference.
+     */
+    setMode(newMode) {
+      if (this.saveOnChange && this.mode && this.mode !== newMode) {
+        this.$.restAPI.savePreferences({diff_view: newMode});
+      }
+      this.mode = newMode;
+    },
+
+    _computeSelectedClass(diffViewMode, buttonViewMode) {
+      return buttonViewMode === diffViewMode ? 'selected' : '';
+    },
+
+    _handleSideBySideTap() {
+      this.setMode(this._VIEW_MODES.SIDE_BY_SIDE);
+    },
+
+    _handleUnifiedTap() {
+      this.setMode(this._VIEW_MODES.UNIFIED);
+    },
+  });
+})();
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_test.html b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_test.html
new file mode 100644
index 0000000..c791091
--- /dev/null
+++ b/polygerrit-ui/app/elements/diff/gr-diff-mode-selector/gr-diff-mode-selector_test.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<!--
+Copyright (C) 2018 The Android Open Source Project
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
+<title>gr-diff-mode-selector</title>
+
+<script src="../../../bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
+<script src="../../../bower_components/web-component-tester/browser.js"></script>
+<link rel="import" href="../../../test/common-test-setup.html"/>
+<script src="../../../bower_components/page/page.js"></script>
+<script src="../../../scripts/util.js"></script>
+
+<link rel="import" href="gr-diff-mode-selector.html">
+
+<script>void(0);</script>
+
+<test-fixture id="basic">
+  <template>
+    <gr-diff-mode-selector></gr-diff-mode-selector>
+  </template>
+</test-fixture>
+
+<script>
+  suite('gr-diff-mode-selector tests', () => {
+    let element;
+    let sandbox;
+
+    setup(() => {
+      sandbox = sinon.sandbox.create();
+      element = fixture('basic');
+    });
+
+    teardown(() => {
+      sandbox.restore();
+    });
+
+    test('_computeSelectedClass', () => {
+      assert.equal(
+          element._computeSelectedClass('SIDE_BY_SIDE', 'SIDE_BY_SIDE'),
+          'selected');
+      assert.equal(
+          element._computeSelectedClass('SIDE_BY_SIDE', 'UNIFIED_DIFF'), '');
+    });
+
+    test('setMode', () => {
+      const saveStub = sandbox.stub(element.$.restAPI, 'savePreferences');
+
+      // Setting the mode initially does not save prefs.
+      element.saveOnChange = true;
+      element.setMode('SIDE_BY_SIDE');
+      assert.isFalse(saveStub.called);
+
+      // Setting the mode to itself does not save prefs.
+      element.setMode('SIDE_BY_SIDE');
+      assert.isFalse(saveStub.called);
+
+      // Setting the mode to something else does not save prefs if saveOnChange
+      // is false.
+      element.saveOnChange = false;
+      element.setMode('UNIFIED_DIFF');
+      assert.isFalse(saveStub.called);
+
+      // Setting the mode to something else does not save prefs if saveOnChange
+      // is false.
+      element.saveOnChange = true;
+      element.setMode('SIDE_BY_SIDE');
+      assert.isTrue(saveStub.calledOnce);
+    });
+  });
+</script>