diff --git a/commitlint.config.js b/commitlint.config.js
index 538274b3..88293ac3 100644
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -18,7 +18,8 @@ module.exports = {
         'checkbox',
         'alert',
         'select',
-        'pagination'
+        'pagination',
+        'dialog'
       ],
     ],
   },
diff --git a/src/baklava.ts b/src/baklava.ts
index b6a383a1..8b415697 100644
--- a/src/baklava.ts
+++ b/src/baklava.ts
@@ -12,4 +12,5 @@ export { default as BlAlert } from './components/alert/bl-alert';
 export { default as BlSelect } from './components/select/bl-select';
 export { default as BlSelectOption } from './components/select/option/bl-select-option';
 export { default as BlPagination } from './components/pagination/bl-pagination';
+export { default as BlDialog } from './components/dialog/bl-dialog';
 export { getIconPath, setIconPath } from './utilities/asset-paths';
diff --git a/src/components/dialog/bl-dialog.css b/src/components/dialog/bl-dialog.css
new file mode 100644
index 00000000..82c86947
--- /dev/null
+++ b/src/components/dialog/bl-dialog.css
@@ -0,0 +1,77 @@
+dialog {
+  padding: 0;
+  border: 0;
+  background: var(--bl-color-primary-background);
+  border-radius: var(--bl-border-radius-l);
+  max-width: calc(100vw - var(--bl-size-4xl));
+  max-height: calc(100vh - var(--bl-size-4xl));
+  overflow: hidden;
+}
+
+dialog::backdrop {
+  background: #273142;
+  opacity: 0.7;
+}
+
+dialog .container {
+  min-width: 424px;
+  min-height: 178px;
+}
+
+dialog header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--bl-size-2xs);
+  padding: var(--bl-size-xl) var(--bl-size-xl) 0 var(--bl-size-xl);
+}
+
+dialog header bl-button {
+  margin-left: auto;
+}
+
+dialog header h2 {
+  font: var(--bl-font-title-1-medium);
+  color: var(--bl-color-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+  padding: 0;
+}
+
+dialog .content {
+  padding: var(--bl-size-xl) var(--bl-size-xl) var(--bl-size-m) var(--bl-size-xl);
+  overflow: auto;
+}
+
+dialog footer {
+  padding: var(--bl-size-xl);
+  display: flex;
+  flex-flow: row-reverse wrap;
+  gap: var(--bl-size-m);
+}
+
+dialog footer.sticky {
+  position: sticky;
+  bottom: 0;
+  z-index: 999; /* FIXME */
+  background-color: var(--bl-color-primary-background);
+  box-shadow: 0 -4px 15px #27314226;
+}
+
+@media only screen and (max-width: 469px) {
+  dialog {
+    max-width: calc(100vw - var(--bl-size-2xl));
+    max-height: calc(100vh - var(--bl-size-2xl));
+  }
+
+  dialog .container {
+    min-width: auto;
+    min-height: auto;
+  }
+
+  dialog footer {
+    flex-flow: column wrap;
+  }
+}
diff --git a/src/components/dialog/bl-dialog.stories.mdx b/src/components/dialog/bl-dialog.stories.mdx
new file mode 100644
index 00000000..afcfd0e2
--- /dev/null
+++ b/src/components/dialog/bl-dialog.stories.mdx
@@ -0,0 +1,181 @@
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { styleMap } from 'lit/directives/style-map.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { Meta, Canvas, ArgsTable, Story, Preview, Source } from '@storybook/addon-docs';
+import { userEvent } from '@storybook/testing-library';
+
+<Meta
+  title="Components/Dialog"
+  component="bl-dialog"
+  argTypes={{
+    open: {
+      control: "boolean",
+      default: false
+    },
+    caption: {
+      control: "text"
+    },
+  }}
+/>
+
+export const dialogOpener = async (event,dialogClass) => {
+  const target= event.target;
+  const isCanvas = !event.target || target.parentNode.parentNode.getAttribute("id") === "root";
+  let selector=`#docs-root .${dialogClass}`;
+  if(isCanvas){
+    selector = `#root .${dialogClass}`;
+  }
+  const dialog = document.querySelector(selector);
+  dialog.setAttribute("open",true);
+}
+
+export const closeAllDialog = async () => {
+  const dialog = document.querySelector(`#root bl-dialog[open]`);
+  dialog?.removeAttribute("open");
+}
+
+export const BasicTemplate = (args) => html`
+<bl-button @click="${(event) => dialogOpener(event,"basic-dialog")}" variant="secondary">Open Dialog</bl-button>
+<bl-dialog class="basic-dialog"
+caption="${ifDefined(args.caption)}"
+open="${ifDefined(args.open)}"
+style = "font: var(--bl-font-body-text-2)">
+  Let us help determine location. This means sending anonymous location data to us.
+  <bl-button slot="primary-action" variant="primary" size="large">Agree</bl-button>
+  <bl-button slot="secondary-action" variant="secondary" kind="danger" size="large">Disagree</bl-button>
+  <bl-button slot="tertiary-action" variant="tertiary" kind="neutral" size="large">Cancel</bl-button>
+</bl-dialog>
+<script>${closeAllDialog()}</script>
+`
+
+export const TemplateWithStickyFooter = (args) => html`
+<bl-button @click="${(event) => dialogOpener(event,"dialog-with-sticky-footer")}" variant="secondary" kind="success">Open Dialog</bl-button>
+<bl-dialog class="dialog-with-sticky-footer"
+caption="${ifDefined(args.caption)}"
+open="${ifDefined(args.open)}"
+style = "font: var(--bl-font-body-text-2)">
+  <bl-alert icon>Please read all terms and conditions.</bl-alert>
+  <h4>Lorem ipsum dolor sit amet</h4>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+   Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <ul>
+    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+  </ul>
+  <p>The standard chunk of Lorem Ipsum used since the 1500s is reproduced  <br/> below for those interested.
+  Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et  <br/> Malorum" by Cicero are also reproduced in their exact original form, <br/>
+  accompanied by English versions from the 1914 translation by H. Rackham.</p>
+  <h4>Quis autem vel eum iure reprehenderit qui</h4>
+  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br/>
+  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br/> when an unknown printer took a galley of type and scrambled <br/>
+  it to make a type specimen book.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <ul>
+    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit</li>
+    <li>Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore.</li>
+  </ul>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/>
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> ut labore et dolore magna aliqua.
+  Ut enim ad minim veniam, quis nostrud exercitation <br/>ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+  <bl-button slot="primary-action" kind='success' variant="primary" size="large">Got It</bl-button>
+  <bl-button slot="secondary-action" variant="secondary" kind="neutral" size="large">Cancel</bl-button>
+</bl-dialog>
+`
+
+export const SizingTemplate = (args) => html`
+<bl-button @click="${(event) => dialogOpener(event,"dialog-sizing")}" variant="tertiary" kind="neutral">Open Dialog</bl-button>
+<bl-dialog class="dialog-sizing"
+caption="${ifDefined(args.caption)}"
+open="${ifDefined(args.open)}"
+style = "font: var(--bl-font-body-text-2)">
+  <p style="width:400px; height:200px; margin:0; padding:0">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
+  when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
+  remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
+  software like Aldus PageMaker including versions of Lorem Ipsum. Let us help determine location. This means sending anonymous location data to us.
+  Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock,
+  a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites
+  of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum"
+  (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum,
+  "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
+  </p>
+  <bl-button slot="primary-action" variant="primary" size="large">Agree</bl-button>
+  <bl-button slot="secondary-action" variant="secondary" kind="danger" size="large">Disagree</bl-button>
+  <bl-button slot="tertiary-action" variant="tertiary" kind="neutral" size="large">Cancel</bl-button>
+</bl-dialog>
+`
+
+# Dialog
+
+Dialogs inform users about a task ansd can contain critical information, require decisions, or involve multiple tasks.
+
+<bl-alert variant="warning" icon caption="Note">Inline styles in examples are only for **demo purposes**. Use regular CSS classes or tag selectors to set styles.</bl-alert>
+
+### Design Rules
+
+* By default a dialog contains a close button.
+* A dialog should contain at least one content (text, image etc.).
+* Dialogs are always centered on the page, with an overlay behind them that hides the page content.
+* Only large buttons can be used in the action bar and there can be maximum 3 buttons (**primary**, **secondary** and **tertiary**).
+To maintain usability level of dialog component:
+* When the dialog sticks to the page edges and does not fit in its minimum size, it switches to mobile view and the buttons are lined up one after.
+* Dialog can be dismissed by clicking backdrop or pressing Esc.
+
+
+## Basic Usage
+
+<Canvas>
+  <Story name="Basic Usage" play={(event) => dialogOpener(event,"basic-dialog")}
+   args={{ caption: "Use location service?"}}>
+    {BasicTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Dialog With Sticky Footer
+
+For long content that does not fit on the page, the dialog action area remains sticky at the bottom of the dialog so that it appears on the page.
+
+<Canvas>
+  <Story name="Dialog With Sticky Footer" play={(event) => dialogOpener(event,"dialog-with-sticky-footer")}
+   args={{ caption: "Terms And Conditions"}}>
+    {TemplateWithStickyFooter.bind({})}
+  </Story>
+</Canvas>
+
+## Dialog Sizing
+
+The dialog doesn't have any size, it will be fluidly sized regarding its content. You can give your own width and height style to your content.
+
+<Canvas>
+  <Story name="Dialog Sizing" play={(event) => dialogOpener(event,"dialog-sizing")}>
+    {SizingTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Reference
+
+<ArgsTable of="bl-dialog" />
diff --git a/src/components/dialog/bl-dialog.test.ts b/src/components/dialog/bl-dialog.test.ts
new file mode 100644
index 00000000..2e2132bb
--- /dev/null
+++ b/src/components/dialog/bl-dialog.test.ts
@@ -0,0 +1,215 @@
+import {
+  assert,
+  fixture,
+  html,
+  oneEvent,
+  expect,
+  fixtureCleanup,
+} from '@open-wc/testing';
+import { sendKeys, sendMouse, resetMouse } from '@web/test-runner-commands';
+import BlDialog from './bl-dialog';
+
+import type typeOfBlDialog from './bl-dialog';
+
+describe('bl-dialog', () => {
+  it('is defined', () => {
+    const el = document.createElement('bl-dialog');
+    assert.instanceOf(el, BlDialog);
+  });
+
+  it('should render with the default values', async () => {
+    const el = await fixture<typeOfBlDialog>(html`<bl-dialog></bl-dialog>`);
+    assert.shadowDom.equal(
+      el,
+      `
+      <dialog aria-labelledby="dialog-caption">
+        <div class="container">
+          <header>
+            <bl-button
+              icon="close"
+              kind="neutral"
+              size="medium"
+              variant="tertiary"
+            >
+            </bl-button>
+          </header>
+          <section class="content" style="max-height: 456px;">
+            <slot>
+            </slot>
+          </section>
+        </div>
+        </dialog>
+    `
+    );
+  });
+
+  it('should render the title,the content and the footer if provided', async () => {
+    const el = await fixture<typeOfBlDialog>(html`<bl-dialog open caption="My title">
+      <div class="content">
+        <p>My Content</p>
+      </div>
+      <bl-button slot="primary-action" size="large">Primary</bl-button>
+      <bl-button slot="secondary-action" variant="secondary" size="large">Secondary</bl-button>
+    </bl-dialog>`);
+
+    const caption = el.shadowRoot?.querySelector('h2') as HTMLElement;
+    const content = el.shadowRoot?.querySelector('.content') as HTMLElement;
+    const footer = el.shadowRoot?.querySelector('footer');
+
+    expect(caption).to.exist;
+    expect(caption?.innerText).to.equal('My title');
+
+    expect(content).to.exist;
+    expect(content?.innerHTML).to.equal('<slot></slot>');
+
+    expect(footer).to.exist;
+    expect(footer?.slot).to.exist;
+  });
+
+  it('should close the dialog when the close btn is clicked', async () => {
+    const el = await fixture<typeOfBlDialog>(html` <bl-dialog open caption="My title">
+      <div>My Content</div>
+    </bl-dialog>`);
+
+    const closeBtn = el?.shadowRoot?.querySelector('bl-button');
+
+    expect(closeBtn).to.exist;
+    expect(el.open).to.equal(true);
+
+    setTimeout(() => {
+      closeBtn?.click();
+      expect(el.open).to.equal(false);
+      fixtureCleanup();
+    });
+  });
+
+  it('should close the dialog when user presses "Escape" key ', async () => {
+    const container = await fixture<HTMLDivElement>(html`<div>
+      <bl-dialog open caption="My title"> </bl-dialog>
+    </div>`);
+
+    const dialog = container.querySelector<typeOfBlDialog>('bl-dialog');
+    if (dialog) {
+      await sendKeys({ press: 'Escape' });
+      expect(dialog?.getAttribute('open'))?.oneOf(['', null]);
+      fixtureCleanup();
+    }
+  });
+
+  it('should close the dialog on outside click', async () => {
+    const body = await fixture<HTMLBodyElement>(html`
+      <div style="width:1500px;height:1500px">
+        <bl-dialog caption="My Title" open>
+          <p>my content</p>
+        </bl-dialog>
+      </div>
+    `);
+
+    const dialogEl = body.querySelector('bl-dialog') as typeOfBlDialog;
+
+    await sendMouse({ type: 'click', position: [1, 1] });
+    expect(dialogEl.getAttribute('open')).oneOf(['', null]);
+    await resetMouse();
+    fixtureCleanup();
+  });
+
+  it('should add shadow to footer when the content is too long', async () => {
+    window.innerWidth = 400;
+
+    const el = await fixture<HTMLElement>(html`<bl-dialog open caption="My title">
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <p>
+          Contrary to popular belief, Lorem Ipsum is not simply random text., comes from a line in
+          section 1.10.32.
+        </p>
+        <bl-button slot="primary-action" size="large">Primary</bl-button>
+        <bl-button slot="secondary-action" variant="secondary" size="large">Secondary</bl-button>
+      </bl-dialog>
+    </body>`);
+
+    const footer = el?.shadowRoot?.querySelector('footer') as HTMLElement;
+
+    expect(footer.className).to.oneOf(['sticky','']);
+  });
+
+  describe('Events', () => {
+    it('should fire bl-dialog-open / close event on dialog open / close', async () => {
+      const el = await fixture<typeOfBlDialog>(html`<bl-dialog open caption="My title">
+      </bl-dialog>`);
+
+      setTimeout(async () => {
+        const ev = await oneEvent(el, 'bl-dialog-open');
+        expect(ev).to.exist;
+        expect(ev.detail.isOpen).to.equal(true);
+      });
+
+      const closeBtn = el?.shadowRoot?.querySelector('bl-button');
+
+      setTimeout(async () => {
+        closeBtn?.click();
+        const ev = await oneEvent(el, 'bl-dialog-close');
+        expect(ev).to.exist;
+        expect(ev.detail.isOpen).to.equal(false);
+      });
+    });
+  });
+});
diff --git a/src/components/dialog/bl-dialog.ts b/src/components/dialog/bl-dialog.ts
new file mode 100644
index 00000000..0b2bea43
--- /dev/null
+++ b/src/components/dialog/bl-dialog.ts
@@ -0,0 +1,177 @@
+import { CSSResultGroup, html, LitElement, PropertyValues, TemplateResult } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { event, EventDispatcher } from '../../utilities/event';
+import '../button/bl-button';
+import style from './bl-dialog.css';
+
+/**
+ * @tag bl-dialog
+ * @summary Baklava Dialog component
+ */
+
+type DialogElement = {
+  showModal: () => void;
+  close: () => void;
+};
+
+@customElement('bl-dialog')
+export default class BlDialog extends LitElement {
+  static get styles(): CSSResultGroup {
+    return [style];
+  }
+
+  /**
+   * Sets dialog open-close status
+   */
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  /**
+   * Sets the dialog title
+   */
+  @property({ type: String })
+  caption?: string;
+
+  @query('dialog')
+  dialog: HTMLDialogElement & DialogElement;
+
+  @query('footer')
+  footer: HTMLElement;
+
+  @query('.container')
+  container: HTMLElement;
+
+  @query('.content')
+  content: HTMLElement;
+
+  /**
+   * Fires when the dialog is opened
+   */
+  @event('bl-dialog-open') private onOpen: EventDispatcher<object>;
+
+  /**
+   * Fires when the dialog is closed
+   */
+  @event('bl-dialog-close') private onClose: EventDispatcher<object>;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    setTimeout(() => {
+      window?.addEventListener('keydown', event => this.onKeydown(event));
+      window?.addEventListener('resize', () => this.resizeHandler());
+      this.dialog.addEventListener('click', this.clickOutsideHandler);
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window?.removeEventListener('keydown', this.onKeydown);
+    window?.removeEventListener('resize', this.resizeHandler);
+    this.dialog.removeEventListener('click', this.clickOutsideHandler);
+  }
+
+  updated(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('open')) {
+      this.toggleDialogHandler();
+    }
+  }
+
+  private resizeHandler() {
+    this.changeContentHeight();
+    this.toggleFooterSticky();
+  }
+
+  private toggleDialogHandler() {
+    if (this.open) {
+      this.dialog.showModal?.();
+      this.onOpen({ isOpen: true });
+      document.body.style.overflow = 'hidden';
+    } else {
+      this.dialog.close?.();
+      this.onClose({ isOpen: false });
+      document.body.style.overflow = 'auto';
+    }
+
+    this.resizeHandler();
+  }
+
+  clickOutsideHandler = (event: MouseEvent) => {
+    const eventPath = event.composedPath() as HTMLElement[];
+
+    if (!eventPath.includes(this.container)) {
+      this.closeDialog();
+    }
+  };
+
+  private closeDialog() {
+    this.open = false;
+  }
+
+  private onKeydown = (event: KeyboardEvent): void => {
+    if (event.code === 'Escape' && this.open) {
+      this.closeDialog();
+    }
+  };
+
+  private toggleFooterSticky() {
+    if (this.content?.scrollHeight > this.content?.offsetHeight) {
+      this.footer?.classList?.add('sticky');
+    } else {
+      this.footer?.classList?.remove('sticky');
+    }
+  }
+
+  private changeContentHeight() {
+    const footerHeight = this.footer?.offsetHeight || 0;
+    let contentHeight = 144; // 56px(header) + 48px(dialog-margin) + 40px(content-padding)
+
+    if (window.innerWidth < 470) {
+       contentHeight = 128; // 56px(header) + 32px(dialog-margin) + 40px(content-padding)
+    }
+
+    this.content.style.maxHeight = `${window.innerHeight - (contentHeight + footerHeight)}px`;
+  }
+
+  get _hasFooter() {
+    return [...this.childNodes].some(node => node.nodeName === 'BL-BUTTON');
+  }
+
+  private renderFooter() {
+    return this._hasFooter
+      ? html`<footer>
+          <slot name="primary-action"></slot>
+          <slot name="secondary-action"></slot>
+          <slot name="tertiary-action"></slot>
+        </footer>`
+      : '';
+  }
+
+  render(): TemplateResult {
+    const title = this.caption ? html`<h2 id="dialog-caption">${this.caption}</h2>` : '';
+
+    return html`
+      <dialog aria-labelledby="dialog-caption">
+        <div class="container">
+          <header>
+            ${title}
+            <bl-button
+              @click="${this.closeDialog}"
+              icon="close"
+              variant="tertiary"
+              kind="neutral"
+            ></bl-button>
+          </header>
+          <section class='content'><slot /></section>
+          ${this.renderFooter()}
+        </div>
+      </dialog>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'bl-dialog': BlDialog;
+  }
+}