Skip to main content

Dialog

Imports​

import {Dialog} from 'material-expressive-react';
import {Dialog} from 'material-expressive-react/dialog';

Props​

PropTypeDefaultRequiredDescription
getCloseAnimation(() => unknown)No
getOpenAnimation(() => unknown)No
noFocusTrapbooleanNo
onCancel((event: Event) => void)No
onClose((event: Event) => void)No
onClosed((event: Event) => void)No
onOpen((event: Event) => void)No
onOpened((event: Event) => void)No
openbooleanNo
quickbooleanNo
returnValuestringNo
typestringNo

Events​

  • onOpen → DOM event open
  • onOpened → DOM event opened
  • onClose → DOM event close
  • onClosed → DOM event closed
  • onCancel → DOM event cancel

Slots​

Material Web components frequently use named slots. In React, you can pass slot="..." on children (e.g. <Icon slot="icon" />).

If you need to slot a child component that does not accept a slot prop, use the Slotted utility (see Utilities → Slotted).

Examples​

See Storybook for live examples and variants.