diff --git a/app/components/confirm-dialog.js b/app/components/confirm-dialog.js
new file mode 100644
index 0000000..a9e1dc5
--- /dev/null
+++ b/app/components/confirm-dialog.js
@@ -0,0 +1,86 @@
+// @flow
+import React, { type Element } from 'react';
+import styled from 'styled-components';
+
+import { TextComponent } from './text';
+import { Button } from './button';
+import { Divider } from './divider';
+
+import CloseIcon from '../assets/images/close_icon.svg';
+
+const Wrapper = styled.div`
+ display: flex;
+ width: ${props => `${props.width}px`};
+ background-color: ${props => props.theme.colors.background};
+ flex-direction: column;
+ align-items: center;
+ border-radius: 6px;
+ box-shadow: 0px 0px 30px 0px black;
+ position: relative;
+`;
+
+const CloseIconWrapper = styled.div`
+ display: flex;
+ width: 100%;
+ align-items: flex-end;
+ justify-content: flex-end;
+ position: absolute;
+`;
+
+const TitleWrapper = styled.div`
+ margin-top: 20px;
+ margin-bottom: 20px;
+`;
+
+const CloseIconImg = styled.img`
+ width: 16px;
+ height: 16px;
+ margin-top: 12px;
+ margin-right: 12px;
+ cursor: pointer;
+`;
+
+const Btn = styled(Button)`
+ width: 95%;
+ margin-bottom: 10px;
+`;
+
+type Props = {
+ handleClose: () => void,
+ title: string,
+ onConfirm: () => void,
+ showButtons?: boolean,
+ width?: number,
+ children: Element<*>,
+};
+
+export const ConfirmDialogComponent = ({
+ children,
+ title,
+ onConfirm,
+ handleClose,
+ showButtons,
+ width,
+}: Props) => (
+
+
+
+
+
+
+
+
+ {React.Children.map(children, _ => _)}
+ {showButtons && (
+ <>
+
+
+ >
+ )}
+
+);
+
+ConfirmDialogComponent.defaultProps = {
+ showButtons: true,
+ width: 460,
+};
diff --git a/app/components/confirm-dialog.mdx b/app/components/confirm-dialog.mdx
new file mode 100644
index 0000000..4b4708a
--- /dev/null
+++ b/app/components/confirm-dialog.mdx
@@ -0,0 +1,31 @@
+---
+name: Confirm Dialog
+---
+
+import { Playground, PropsTable } from 'docz'
+
+import { Button } from './button.js'
+import { ConfirmDialogComponent } from './confirm-dialog.js'
+import { DoczWrapper } from '../theme.js'
+
+# Confirm Dialog
+
+## Properties
+
+
+
+## Basic Usage
+
+
+
+ {() => (
+ alert('Confirm')}
+ handleClose={() => alert('Close')}
+ >
+ Confirm content
+
+ )}
+
+