diff --git a/src/App.tsx b/src/App.tsx
index 374eed70..d8a7258b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -29,12 +29,14 @@ import {
   WarningAlert,
   CardPrimary,
 } from "@/components";
+import { Dialog } from "@/components/Dialog/Dialog";
 
 const App = () => {
   const [currentTheme, setCurrentTheme] = useState<ThemeName>("dark");
   const [selectedButton, setSelectedButton] = useState(0);
   const [checked, setChecked] = useState(false);
   const [disabled] = useState(false);
+  const [open, setOpen] = useState(true);
 
   return (
     <ClickUIProvider
@@ -267,6 +269,20 @@ const App = () => {
         title="Title"
       />
       <Avatar text="CH" />
+
+      <Button onClick={() => setOpen(true)}>Button</Button>
+      <Dialog
+        open={open}
+        onOpenChange={setOpen}
+      >
+        <Dialog.Content
+          title="Hello"
+          showClose
+          onClose={() => setOpen(false)}
+        >
+          <p>I'm a dialog</p>
+        </Dialog.Content>
+      </Dialog>
     </ClickUIProvider>
   );
 };
diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx
index 4113990e..aec13c85 100644
--- a/src/components/Dialog/Dialog.stories.tsx
+++ b/src/components/Dialog/Dialog.stories.tsx
@@ -14,7 +14,7 @@ const DialogComponent = ({
   showClose,
   forceMount,
 }: {
-  open: "default" | "open" | "closed";
+  open?: boolean;
   title: string;
   modal: boolean;
   showClose: boolean;
@@ -22,7 +22,7 @@ const DialogComponent = ({
 }) => (
   <GridCenter>
     <Dialog
-      open={open === "default" ? undefined : open === "open"}
+      open={open}
       modal={modal}
     >
       <Dialog.Trigger>
@@ -59,7 +59,7 @@ export default {
   tags: ["autodocs", "dialog"],
   argTypes: {
     open: {
-      options: ["default", "open", "closed"],
+      options: [true, false, undefined],
       control: { type: "radio" },
     },
   },
@@ -68,7 +68,10 @@ export default {
 export const Playground = {
   args: {
     title: "Example dialog title",
-    open: "true",
     showClose: true,
+    open: true,
+    onOpenChange: () => {
+      console.log("ignored");
+    },
   },
 };
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index c1adf27c..a81dbdf2 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -21,16 +21,7 @@ interface DialogTriggerProps extends RadixDialog.DialogTriggerProps {
 }
 
 const DialogTrigger = ({ children, ...props }: DialogTriggerProps) => {
-  return (
-    <>
-      <Trigger
-        asChild
-        {...props}
-      >
-        {children}
-      </Trigger>
-    </>
-  );
+  return <Trigger {...props}>{children}</Trigger>;
 };
 
 DialogTrigger.displayName = "DialogTrigger";
@@ -111,9 +102,9 @@ const CrossButton = styled(EmptyButton)`
   }
 `;
 
-const CloseButton = () => (
+const CloseButton = ({ onClose }: { onClose?: () => void }) => (
   <RadixDialog.Close asChild>
-    <CrossButton>
+    <CrossButton onClick={onClose}>
       <Icon
         name="cross"
         size="lg"
@@ -128,12 +119,14 @@ interface DialogContentProps extends RadixDialog.DialogContentProps {
   forceMount?: true;
   container?: HTMLElement | null;
   children: ReactNode;
+  onClose?: () => void;
 }
 
 const DialogContent = ({
   title,
   children,
   showClose,
+  onClose,
   forceMount,
   container,
 }: DialogContentProps) => {
@@ -151,7 +144,7 @@ const DialogContent = ({
           >
             {title}
           </Title>
-          {showClose && <CloseButton />}
+          {showClose && <CloseButton onClose={onClose} />}
         </TitleArea>
         <Spacer />
         {children}