@arterial/dialog v3.0.0

Arterial Dialog

Another React Material Dialog

Installation

npm install @arterial/dialog

Usage

Styles

Sass

@use "@material/dialog/index.scss" as dialog;
@include dialog.core-styles;

CSS

import '@material/dialog/dist/mdc.dialog.css';

JSX

import { Dialog, DialogActions, DialogButton, ... } from '@arterial/dialog';

Alert Dialog

Alert dialogs interrupt users with urgent information, details, or actions.

function AlertDialogDemo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button label="Open Alert" onClick={() => setOpen(true)} unelevated />
      <AlertDialog
        title="Alert"
        content="Discard draft?"
        confirmingButtonLabel="Discard"
        onClose={() => setOpen(false)}
        open={open}
      />
    </>
  );
}

Simple Dialog

Simple dialogs can display items that are immediately actionable when selected. They don’t have text buttons.

function SimpleDialogDemo() {
  const [open, setOpen] = useState(false);
  function handleClose() {
    setOpen(false);
  }
  return (
    <>
      <Button label="Open Dialog" onClick={() => setOpen(true)} unelevated />
      <SimpleDialog
        title="Select an account"
        content={
          <List>
            <ListItem onClick={handleClose}>
              <ListItemGraphic graphic="person" />
              <ListItemText>user1@example.com</ListItemText>
            </ListItem>
            <ListItem onClick={handleClose}>
              <ListItemGraphic graphic="person" />
              <ListItemText>user2@example.com</ListItemText>
            </ListItem>
            <ListItem onClick={handleClose}>
              <ListItemGraphic graphic="add" />
              <ListItemText>Add account</ListItemText>
            </ListItem>
          </List>
        }
        onClose={handleClose}
        open={open}
      />
    </>
  );
}

Confirmation Dialog

Confirmation dialogs give users the ability to provide final confirmation of a choice before committing to it, so they have a chance to change their minds if necessary.

function ConfirmationDialogDemo() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button label="Open Dialog" onClick={() => setOpen(true)} unelevated />
      <ConfirmationDialog
        title="Reset settings?"
        content="This will reset your device to its default factory settings."
        confirmingButtonLabel="Accept"
        onClose={() => setOpen(false)}
        open={open}
      />
    </>
  );
}

Other Variants

Scrollable

function Scrollable() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button
        label="Open Scrollable"
        onClick={() => setOpen(true)}
        unelevated
      />
      <Dialog onClose={() => setOpen(false)} open={open} scrollable>
        <DialogTitle>The Wonderful Wizard of Oz</DialogTitle>
        <DialogContent>...</DialogContent>
        <DialogActions>
          <DialogButton label="Decline" onSelect={() => setOpen(false)} />
          <DialogButton label="Accept" onSelect={() => setOpen(false)} />
        </DialogActions>
      </Dialog>
    </>
  );
}

Stacked Actions

Stacked buttons accommodate longer button text. Confirming actions appear above dismissive actions.

function Stacked() {
  const [open, setOpen] = useState(false);
  function handleClose(action) {
    if (action === 'ok') {
      // Turn on speed boost
    }
    setOpen(false);
  }
  return (
    <>
      <Button label="Open Stacked" onClick={() => setOpen(true)} unelevated />
      <Dialog open={open} onClose={handleClose} stacked>
        <DialogTitle>Use location service?</DialogTitle>
        <DialogContent>...</DialogContent>
        <DialogActions>
          <DialogButton
            action="ok"
            label="Turn on speed boost"
            onSelect={handleClose}
          />
          <DialogButton label="No thanks" onSelect={handleClose} />
        </DialogActions>
      </Dialog>
    </>
  );
}

Props

Dialog

DialogTitle

DialogContent

DialogActions

DialogButton