diff --git a/static_src/elements/framework/mr-button-bar/mr-button-bar.js b/static_src/elements/framework/mr-button-bar/mr-button-bar.js
new file mode 100644
index 0000000..8cff503
--- /dev/null
+++ b/static_src/elements/framework/mr-button-bar/mr-button-bar.js
@@ -0,0 +1,100 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {LitElement, html, css} from 'lit-element';
+
+import 'elements/framework/mr-dropdown/mr-dropdown.js';
+
+import 'shared/typedef.js';
+
+/** Button bar containing table controls. */
+export class MrButtonBar extends LitElement {
+  /** @override */
+  static get styles() {
+    return css`
+      :host {
+        display: flex;
+      }
+      button {
+        background: none;
+        color: var(--chops-link-color);
+        cursor: pointer;
+        font-size: var(--chops-normal-font-size);
+        font-weight: var(--chops-link-font-weight);
+
+        line-height: 24px;
+        padding: 4px 16px;
+
+        border: none;
+
+        align-items: center;
+        display: inline-flex;
+      }
+      button:hover {
+        background: var(--chops-active-choice-bg);
+      }
+      i.material-icons {
+        font-size: 20px;
+        margin-right: 4px;
+        vertical-align: middle;
+      }
+      mr-dropdown {
+        --mr-dropdown-anchor-padding: 6px 4px;
+        --mr-dropdown-icon-color: var(--chops-link-color);
+      }
+    `;
+  }
+
+  /** @override */
+  render() {
+    return html`
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+      ${this.items.map(_renderItem)}
+    `;
+  }
+
+  /** @override */
+  static get properties() {
+    return {
+      items: {type: Array},
+    };
+  };
+
+  /** @override */
+  constructor() {
+    super();
+
+    /** @type {Array<MenuItem>} */
+    this.items = [];
+  }
+};
+
+/**
+ * Renders one item.
+ * @param {MenuItem} item
+ * @return {TemplateResult}
+ */
+function _renderItem(item) {
+  if (item.items) {
+    return html`
+      <mr-dropdown
+        icon=${item.icon}
+        menuAlignment="left"
+        label=${item.text}
+        .items=${item.items}
+      ></mr-dropdown>
+    `;
+  } else {
+    return html`
+      <button @click=${item.handler}>
+        <i class="material-icons" ?hidden=${!item.icon}>
+          ${item.icon}
+        </i>
+        ${item.text}
+      </button>
+    `;
+  }
+}
+
+customElements.define('mr-button-bar', MrButtonBar);