1 files changed, 30 insertions, 0 deletions
diff --git a/src/components/atoms/layout/notice.tsx b/src/components/atoms/layout/notice.tsx
new file mode 100644
index 0000000..b6e09c5
--- /dev/null
+++ b/src/components/atoms/layout/notice.tsx
@@ -0,0 +1,30 @@
+import { VFC } from 'react';
+import styles from './notice.module.scss';
+
+export type NoticeKind = 'error' | 'info' | 'success' | 'warning';
+
+export type NoticeProps = {
+  /**
+   * The notice kind.
+   */
+  kind: NoticeKind;
+  /**
+   * The notice body.
+   */
+  message: string;
+};
+
+/**
+ * Notice component
+ *
+ * Render a colored message depending on notice kind.
+ */
+const Notice: VFC<NoticeProps> = ({ kind, message }) => {
+  const kindClass = `wrapper--${kind}`;
+
+  return (
+    <div className={`${styles.wrapper} ${styles[kindClass]}`}>{message}</div>
+  );
+};
+
+export default Notice;