Skip to main content

dyte-dialog

A dialog component.

<dyte-button onclick="showDialog()">Show dialog</dyte-button>
<dyte-dialog id="dyte-el" open="false">
  <div>
    <h3>Hello!</h3>
    <p>This is some text inside dialog!</p>
  </div>
</dyte-dialog>

<script>
  const dialog = document.getElementById('dyte-el');

  dialog.addEventListener('dyteDialogClose', (open) => {
    console.log('dialog closed');
  });

  function showDialog() {
    dialog.open = true;
  }
</script>
<style>
  dyte-dialog > div {
    width: 512px;
    backgroundcolor: #000;
    color: #fff;
    padding: 12px;
    borderradius: 8px;
  }
  p {
    margin-bottom: 0;
  }
</style>

Props​

config

UI Config

Default
defaultConfig

disableEscapeKey

Whether Escape key can close the modal

Default
false
Type
boolean

hideCloseButton

Whether to show the close button

Default
false
Type
boolean

iconPack

Icon pack

Default
defaultIconPack

meeting

Meeting object

open

Whether a dialog is open or not

Default
true
Type
boolean

size

Size

Type
"lg" | "md" | "sm" | "xl"

states

States object

Type
States

t

Language

Default
useLanguage()