STYLED MDL

Dialog

Modal windows for dedicated user input.

Basic Dialog

/*--- Basic Dialog ---*/

// using recompose withStateHandlers
// https://github.com/acdlite/recompose/blob/master/docs/API.md#withstatehandlers

const Demo = withStateHandlers(
  { isShowingDialog: false },
  {
    showDialog: () => () => ({ isShowingDialog: true }),
    hideDialog: () => () => ({ isShowingDialog: false }),
  }
)(({ showDialog, hideDialog, isShowingDialog }) => (
  <div>
    <Button raised onClick={showDialog} text="Show" />
    <Dialog
      isOpen={isShowingDialog}
      onRequestClose={hideDialog}
      contentLabel="My Dialog"
      appElement={document.getElementById('__next')}
      size="8"
    >
      <DialogTitle>MDL Dialog</DialogTitle>
      <DialogContent>
        This is an example of the Material Design Lite dialog component. Please
        use responsibly.
      </DialogContent>
      <DialogActions>
        <Button onClick={hideDialog}>Close</Button>
        <Button disabled>Disabled Action</Button>
      </DialogActions>
    </Dialog>
  </div>
))

Dialog with full-width buttons

/*--- Basic Dialog ---*/

// using recompose withStateHandlers
// https://github.com/acdlite/recompose/blob/master/docs/API.md#withstatehandlers

const Demo = withStateHandlers(
  { isShowingDialog: false },
  {
    showDialog: () => () => ({ isShowingDialog: true }),
    hideDialog: () => () => ({ isShowingDialog: false }),
  }
)(({ showDialog, hideDialog, isShowingDialog }) => (
  <div>
    <Button raised onClick={showDialog} text="Show" />
    <Dialog
      isOpen={isShowingDialog}
      onRequestClose={hideDialog}
      contentLabel="My Dialog"
      appElement={document.getElementById('__next')}
      size="5"
    >
      <DialogTitle>MDL Dialog</DialogTitle>
      <DialogContent>
        This is an example of the MDL Dialog being used as a modal. It is using
        the full width action design intended for use with buttons that do not
        fit within the specified <a href={mdSpecLink}>length metrics</a>
        .
      </DialogContent>
      <DialogActions fullWidth>
        <Button onClick={this.hide}>Agree</Button>
        <Button disabled>Inactive Action</Button>
      </DialogActions>
    </Dialog>
  </div>
))

Usage

The Dialog component is a styled wrapper around React Modal. It supports the entire React Modal API + adds a new size prop to easily control sizing. We also provide DialogTitle, DialogContent and DialogActions components to support the Material Design dialog spec.

<Dialog>

PropTypeDefaultDescription
sizenumber|string5Scales the dialog by factors of 56px, so size="5" will render a dialog that is 280px wide

<DialogTitle>

No Custom Props

<DialogContent>

No Custom Props

<DialogActions>

PropTypeDefaultDescription
fullWidthbooleanfalseDisplay action buttons as full width instead of inline