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

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()