diff --git a/packages/ui/src/components/dialog/dialog-footer.web.tsx b/packages/ui/src/components/dialog/dialog-footer.web.tsx
new file mode 100644
index 00000000..f3028329
--- /dev/null
+++ b/packages/ui/src/components/dialog/dialog-footer.web.tsx
@@ -0,0 +1,26 @@
+import { Flex, FlexProps } from 'leather-styles/jsx';
+
+interface DialogFooterProps extends FlexProps {
+ children: React.ReactNode;
+}
+
+export function DialogFooter({ children, ...props }: DialogFooterProps) {
+ return (
+
+ {children}
+
+ );
+}
diff --git a/packages/ui/src/components/dialog/dialog.web.stories.tsx b/packages/ui/src/components/dialog/dialog.web.stories.tsx
index 086cc849..81377496 100644
--- a/packages/ui/src/components/dialog/dialog.web.stories.tsx
+++ b/packages/ui/src/components/dialog/dialog.web.stories.tsx
@@ -1,9 +1,10 @@
import { useState } from 'react';
import type { Meta } from '@storybook/react';
+import { Box, Flex } from 'leather-styles/jsx';
-import { Button } from '@leather.io/ui';
-
+import { Button } from '../button/button.web';
+import { DialogHeader } from './dialog-header.web';
import { Dialog as Component } from './dialog.web';
const meta: Meta = {
@@ -20,11 +21,64 @@ export function Dialog() {
<>
Some Header}
+ header={}
+ isShowing={isShowing}
+ onClose={() => setIsShowing(false)}
+ >
+
+ Let's start a dialogue.
+
+
+ >
+ );
+}
+
+export function DialogWithFooter() {
+ const [isShowing, setIsShowing] = useState(false);
+ return (
+ <>
+
+ }
+ isShowing={isShowing}
+ onClose={() => setIsShowing(false)}
+ footer={
+
+ }
+ >
+
+ Let's start a dialogue.
+
+
+ >
+ );
+}
+
+export function DialogWithButtonsFooter() {
+ const [isShowing, setIsShowing] = useState(false);
+ return (
+ <>
+
+ }
isShowing={isShowing}
onClose={() => setIsShowing(false)}
+ footer={
+
+
+
+
+ }
>
- Some Dialog
+
+ Let's start a dialogue.
+
>
);
diff --git a/packages/ui/src/components/dialog/dialog.web.tsx b/packages/ui/src/components/dialog/dialog.web.tsx
index 10b6e523..d951e87c 100644
--- a/packages/ui/src/components/dialog/dialog.web.tsx
+++ b/packages/ui/src/components/dialog/dialog.web.tsx
@@ -7,6 +7,8 @@ import { token } from 'leather-styles/tokens';
import { pxStringToNumber } from '@leather.io/utils';
+import { DialogFooter } from './dialog-footer.web';
+
export interface DialogProps {
isShowing: boolean;
onClose?(): void;
@@ -91,7 +93,7 @@ export function Dialog({
) : (
children
)}
- {footer}
+ {footer && {footer}}