Project import generated by Copybara.
GitOrigin-RevId: d9e9e3fb4e31372ec1fb43b178994ca78fa8fe70
diff --git a/static_src/elements/framework/mr-error/mr-error.js b/static_src/elements/framework/mr-error/mr-error.js
new file mode 100644
index 0000000..084a326
--- /dev/null
+++ b/static_src/elements/framework/mr-error/mr-error.js
@@ -0,0 +1,51 @@
+// Copyright 2019 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';
+
+
+/**
+ * `<mr-error>`
+ *
+ * A container for showing errors.
+ *
+ */
+export class MrError extends LitElement {
+ /** @override */
+ static get styles() {
+ return css`
+ :host {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ justify-content: flex-start;
+ box-sizing: border-box;
+ width: 100%;
+ margin: 0.5em 0;
+ padding: 0.25em 8px;
+ border: 1px solid #B71C1C;
+ border-radius: 4px;
+ background: #FFEBEE;
+ }
+ :host([hidden]) {
+ display: none;
+ }
+ i.material-icons {
+ color: #B71C1C;
+ margin-right: 4px;
+ }
+ `;
+ }
+
+ /** @override */
+ render() {
+ return html`
+ <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <i class="material-icons">close</i>
+ <slot></slot>
+ `;
+ }
+}
+
+customElements.define('mr-error', MrError);