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

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