Skip to main content

DyteDialog

A dialog component.

function Example() {
  const [showDialog, setShowDialog] = useState(false);

  return (
    <div>
      <DyteButton onClick={() => setShowDialog(true)}>Show Dialog</DyteButton>
      <DyteDialog
        open={showDialog}
        onDyteDialogClose={() => setShowDialog(false)}
      >
        <div
          style={{
            width: '512px',
            backgroundColor: '#000',
            color: '#fff',
            padding: 12,
            borderRadius: 8,
          }}
        >
          <h3>Hello!</h3>
          <p style={{ marginBottom: 0 }}>This is some text inside dialog!</p>
        </div>
      </DyteDialog>
    </div>
  );
}

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