Modal dialog

A modal dialog displays content that requires user interaction in a layer above the page.

#Default

Use a modal when people must act before carrying on.

import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@wolf-rayet/react';

<Button onClick={() => setBasic(true)}>Open modal</Button>
<Modal isOpen={basic} onClose={() => setBasic(false)} label="Duplicate this conversation">
  <ModalHeader>
    <ModalTitle>Duplicate this conversation</ModalTitle>
  </ModalHeader>
  <ModalBody>
    <p style={{ margin: 0 }}>
      Duplicating makes a copy in the same queue. The copy is unassigned until someone picks it up.
    </p>
  </ModalBody>
  <ModalFooter>
    <Button appearance="subtle" onClick={() => setBasic(false)}>Cancel</Button>
    <Button appearance="primary" onClick={() => setBasic(false)}>Duplicate</Button>
  </ModalFooter>
</Modal>

#Danger

Use a danger modal to confirm something that cannot be undone.

import { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle } from '@wolf-rayet/react';

<Button appearance="danger" onClick={() => setDanger(true)}>Delete rep</Button>
<Modal isOpen={danger} onClose={() => setDanger(false)} width="small" label="Delete this rep">
  <ModalHeader>
    <ModalTitle appearance="danger">Delete this rep</ModalTitle>
  </ModalHeader>
  <ModalBody>
    <p style={{ margin: 0 }}>
      Their open conversations move back to the queue. You cannot undo this.
    </p>
  </ModalBody>
  <ModalFooter>
    <Button appearance="subtle" onClick={() => setDanger(false)}>Cancel</Button>
    <Button appearance="danger" onClick={() => setDanger(false)}>Delete</Button>
  </ModalFooter>
</Modal>

#With a form

Keep the actions in the footer so people always know where to finish.

import { Button, ButtonGroup, Field, Label, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, TextField } from '@wolf-rayet/react';

<Button onClick={() => setForm(true)}>Add a queue</Button>
<Modal isOpen={form} onClose={() => setForm(false)} label="Add a queue">
  <ModalHeader>
    <ModalTitle>Add a queue</ModalTitle>
  </ModalHeader>
  <ModalBody>
    <Field>
      <Label htmlFor="queue-name" isRequired>Queue name</Label>
      <TextField id="queue-name" />
    </Field>
  </ModalBody>
  <ModalFooter>
    <ButtonGroup label="Modal actions">
      <Button appearance="subtle" onClick={() => setForm(false)}>Cancel</Button>
      <Button appearance="primary" onClick={() => setForm(false)}>Add queue</Button>
    </ButtonGroup>
  </ModalFooter>
</Modal>