Aqua Basis

The AqDialog component displays modal dialogs to present content and capture user decisions. It supports headers, footers, backdrop interaction, and customizable states and sizes.

<div class="section">
  <div class="section-title">AqDialog</div>
  <div class="components">
    <aq-toggle id="toggle-dialog"></aq-toggle>

    <aq-dialog
      id="dialog"
      size="small"
      title-dialog="Dialog Title Toggle"
      state="info"
      allow-maximize
    >
      <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
        Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
      </span>

      <div slot="header-right">
        <em class="aq-icon-three-dots-vertical"></em>
      </div>

      <div slot="footer-right">
        <aq-button id="secondary-btn">Secondary</aq-button>
        <aq-button id="close-dialog">Close</aq-button>
      </div>

      <div slot="footer-left">
        <aq-button>Tertiary</aq-button>
      </div>
    </aq-dialog>
  </div>
</div>

Props and Attributes

Prop / Attr	Type	Default	Description
`hasCloseIcon`	`boolean`	`true`	Whether to show a close icon in the header.
`closeOnBackdrop`	`boolean`	`true`	Closes the dialog when the backdrop is clicked.
`closeOnEscape`	`boolean`	`true`	Enables closing the dialog with the Escape key.
`titleDialog`	`string`	`'Example Dialog'`	Sets the title in the header.
`size`	`'small'	'medium'	'large'
`state`	`'info'	'success'	'warning'
`hasHeader`	`boolean`	`true`	Whether to display the header or not.
`allowMaximize`	`boolean`	`false`	Allows the dialog to be maximized.
`woPadding`	`boolean`	`false`	Removes body padding.
`footer`	`boolean`	`true`	Whether to display the footer.
`idDialog`	`string`	`''`	Sets a custom `id` to identify the dialog.

PlayGround

You can interact with the component and experiment with its attributes and properties directly in this playground.

In the Code tab, the generated code snippet is available.

In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-overlays-aqdialog--default&nav=0

<aside> ⚠️

Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.

</aside>

Events

Event	Description	React	Angular	Vue	Vanilla JS
`open`	Fired when the dialog is opened.	`onOpen={handleOpen}`	`(open)="handleOpen($event)"`	`@open="handleOpen"`	`addEventListener('open', handler)`
`close`	Fired when the dialog is closed.	`onClose={handleClose}`	`(close)="handleClose($event)"`	`@close="handleClose"`	`addEventListener('close', handler)`

API

Method	Description	Returns	React	Angular	Vue	Vanilla
`show`	Shows the dialog.	`Promise<void>`	`await ref.current.show()`	`await dialogEl.show()`	`await ref.value.show()`	`await element.show()`
`hide`	Hides/closes the dialog.	`Promise<void>`	`await ref.current.hide()`	`await dialogEl.hide()`	`await ref.value.hide()`	`await element.hide()`

In frameworks

Props considerations

When using the components across different frameworks, keep in mind the convention for defining props:

In Vue, Angular and in vanilla JavaScript/HTML (direct Web Component usage), props must be written in kebab-case (e.g., is-required, helper-text).
In React props should be written in camelCase (e.g., isRequired, helperText).

This difference exists because each framework has its own best practices: React follows JavaScript conventions and uses camelCase for props, while Vue, Angular, and direct HTML/Web Components usage rely on kebab-case in templates to align with HTML attribute naming conventions.

Web Components

<div class="section">
  <div class="section-title">AqDialog</div>
  <div class="components">
    <aq-toggle id="toggle-dialog"></aq-toggle>

    <aq-button is-outline info="Open dialog using directive">
      Open dialog as directive
    </aq-button>

    <aq-dialog
      id="dialog"
      size="small"
      title-dialog="Dialog Title Toggle"
      state="info"
      allow-maximize
    >
      <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
        Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
      </span>

      <div slot="header-right">
        <em class="aq-icon-three-dots-vertical"></em>
      </div>

      <div slot="footer-right">
        <aq-button id="secondary-btn">Secondary</aq-button>
        <aq-button id="close-dialog">Close</aq-button>
      </div>

      <div slot="footer-left">
        <aq-button>Tertiary</aq-button>
      </div>
    </aq-dialog>
  </div>
</div>

<script>
  const toggle = document.getElementById('toggle-dialog');
  const dialog = document.getElementById('dialog');
  const closeBtn = document.getElementById('close-dialog');

  toggle.addEventListener('change', (e) => {
    const value = e.detail.value;
    dialog.value = value;
  });

  closeBtn.addEventListener('click', () => {
    dialog.value = false;
    console.log('Dialog close.')
  });

  dialog.addEventListener('close', () => {
    console.log('Handle dialog onClose event.')
  });
</script>

Vue

<template>
  <div class="section">
    <div class="section-title">AqDialog</div>
    <div class="components">
      <aq-toggle v-model="toggleValue" />

      <aq-dialog
        size="small"
        title-dialog="Dialog Title Toggle"
        state="info"
        allow-maximize
        :value="toggleValue"
        @close="handleClose"
      >
        <span>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
          Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
        </span>

        <div slot="header-right">
          <em class="aq-icon-three-dots-vertical"></em>
        </div>

        <div slot="footer-right">
          <aq-button>Secondary</aq-button>
          <aq-button @click="closeDialog">Close</aq-button>
        </div>

        <div slot="footer-left">
          <aq-button>Tertiary</aq-button>
        </div>
      </aq-dialog>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { AqDialog, AqToggle, AqButton, AqLabel, AqBanner } from '@aqua-ds/vue'

export default defineComponent({
  name: 'DialogSection',
  components: {
    AqDialog,
    AqToggle,
    AqButton,
    AqLabel,
    AqBanner,
  },
  setup() {
    const toggleValue = ref(false)

    const closeDialog = () => {
      toggleValue.value = false
    }

    const handleClose = () => {
      toggleValue.value = false
    }

    return {
      toggleValue,
      closeDialog,
      handleClose,
    }
  },
})
</script>

React

import {
  AqDialog,
  AqToggle,
  AqButton,
} from '@aqua-ds/react';

import { useState } from 'react';

export const DialogSet = () => {
  const [toggleValue, setToggleValue] = useState(false);

  const closeDialog = () => {
    setToggleValue(false);
  };

  const handleClose = () => {
    setToggleValue(false);
  };

  return (
    <div className="section">
      <div className="section-title">AqDialog</div>
      <div className="components">
        <AqToggle
          onChange={(e: any) => setToggleValue(e.nativeEvent.detail.value)}
        />

        <AqDialog
          size="small"
          titleDialog="Dialog Title Toggle"
          state="info"
          allowMaximize
          value={toggleValue}
          onClose={handleClose}
        >
          <span>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
            Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
          </span>

          <div slot="header-right">
            <em className="aq-icon-three-dots-vertical"></em>
          </div>

          <div slot="footer-right">
            <AqButton>Secondary</AqButton>
            <AqButton onClick={closeDialog}>Close</AqButton>
          </div>

          <div slot="footer-left">
            <AqButton>Tertiary</AqButton>
          </div>
        </AqDialog>
      </div>
    </div>
  );
};

Angular

// dialog.component.ts
import { Component } from '@angular/core';
import {
  AqDialog,
  AqToggle,
  AqButton,
  AWCValueAccessor,
} from '@aqua-ds/angular';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-set-dialog',
  standalone: true,
  imports: [
    AqDialog,
    AqToggle,
    AqButton,
    FormsModule,
    ReactiveFormsModule,
    AWCValueAccessor,
  ],
  templateUrl: './set-dialog.component.html',
})
export class SetDialogComponent {
  toggleValue = false;

  closeDialog = () => {
    this.toggleValue = false;
    console.log('Dialog closed.');
  };
  
  handleClose = () => {
    this.toggleValue = false;
    console.log('Handle dialog <onClose> event.');
  };
}