1 files changed, 36 insertions, 0 deletions
diff --git a/packages/instant/src/components/sliding_error.tsx b/packages/instant/src/components/sliding_error.tsx
new file mode 100644
index 000000000..0237fb7e9
--- /dev/null
+++ b/packages/instant/src/components/sliding_error.tsx
@@ -0,0 +1,36 @@
+import * as React from 'react';
+
+import { ColorOption } from '../style/theme';
+
+import { SlideUpAndDownAnimation } from './animations/slide_up_and_down_animation';
+
+import { Container, Text } from './ui';
+
+export interface ErrorProps {
+    icon: string;
+    message: string;
+}
+
+export const Error: React.StatelessComponent<ErrorProps> = props => (
+    <Container
+        padding="10px"
+        border={`1px solid ${ColorOption.darkOrange}`}
+        backgroundColor={ColorOption.lightOrange}
+        width="100%"
+        borderRadius="6px"
+        marginBottom="10px"
+    >
+        <Container marginRight="5px" display="inline">
+            {props.icon}
+        </Container>
+        <Text fontWeight="500" fontColor={ColorOption.darkOrange}>
+            {props.message}
+        </Text>
+    </Container>
+);
+
+export const SlidingError: React.StatelessComponent<ErrorProps> = props => (
+    <SlideUpAndDownAnimation downY="120px" delayMs={5000}>
+        <Error icon={props.icon} message={props.message} />
+    </SlideUpAndDownAnimation>
+);