3 files changed, 52 insertions, 0 deletions
diff --git a/ui/app/components/error-message/error-message.component.js b/ui/app/components/error-message/error-message.component.js
new file mode 100644
index 000000000..b4464c33b
--- /dev/null
+++ b/ui/app/components/error-message/error-message.component.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const ErrorMessage = (props, context) => {
+  const { errorMessage, errorKey } = props
+  const error = errorKey ? context.t(errorKey) : errorMessage
+
+  return (
+    <div className="error-message">
+      <img
+        src="/images/alert-red.svg"
+        className="error-message__icon"
+      />
+      <div className="error-message__text">
+        { `ALERT: ${error}` }
+      </div>
+    </div>
+  )
+}
+
+ErrorMessage.propTypes = {
+  errorMessage: PropTypes.string,
+  errorKey: PropTypes.string,
+}
+
+ErrorMessage.contextTypes = {
+  t: PropTypes.func,
+}
+
+export default ErrorMessage
diff --git a/ui/app/components/error-message/index.js b/ui/app/components/error-message/index.js
new file mode 100644
index 000000000..1c97a9955
--- /dev/null
+++ b/ui/app/components/error-message/index.js
@@ -0,0 +1 @@
+export { default } from './error-message.component'
diff --git a/ui/app/components/error-message/index.scss b/ui/app/components/error-message/index.scss
new file mode 100644
index 000000000..5915e21cf
--- /dev/null
+++ b/ui/app/components/error-message/index.scss
@@ -0,0 +1,21 @@
+.error-message {
+  min-height: 32px;
+  border: 1px solid $monzo;
+  color: $monzo;
+  background: lighten($monzo, 56%);
+  border-radius: 4px;
+  font-size: .75rem;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  padding: 8px 16px;
+
+  &__icon {
+    margin-right: 8px;
+    flex: 0 0 auto;
+  }
+
+  &__text {
+    overflow: auto;
+  }
+}