Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

import React from 'react';
import { Icon } from '@minddrop/ui';

export const DialogDemo = () => (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <Icon name="settings" color="white" />
  </div>
);

export default DialogDemo;

Import the components from the @minddrop/ui package.

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogTitle,
  DialogDescription,
  Button,
} from '@minddrop/ui';

export default () => {
  return (
    <Dialog>
      <DrialogTrigger>
        <Button>Edit profile</Button>
        <DialogContent>
          <DialogTitle>Edit profile</DialogTitle>
          <DialogDescription>
            Make changes to your profile here. Click save when you're
            done.
          </DialogDescription>
          ...
        </DialogContent>
      </DrialogTrigger>
    </Dialog>
  );
};

Contains all the parts of a dialog.

A wrapper component to be placed around the button which triggers the dialog.

Contains content to be rendered in the open dialog.

A wrapper component to be placed around a button which closes the dialog.

An accessible name to be announced when the dialog is opened. Alternatively, you can provide aria-label or aria-labelledby to DialogContent and exclude this component.

An accessible description to be announced when the dialog is opened. Alternatively, you can provide aria-describedby to DialogContent and exclude this component.

Adheres to the Dialog WAI-ARIA design pattern.