Skip to content
Lemonade

Modal

Modals are used to display content in a layer above the app. It's used in cases when you need to view, create or edit content as well as confirmation messages. No other information on the main page should be accessed while a modal is active.

Best practices

  • Use modals sparingly because they interrupt user workflow.
  • The title should reflect the action or button that was clicked by the user.
  • Should be dismissed by pressing ESC key, clicking/touching outside the modal area and by using the "x" icon in the upper right corner of the modal.
  • Maintain users previous focused element after closing the modal.
InformationUsed to display information that does not require user input. They usually display only text that does not need to be displayed directly on the screen.
ConfirmationUsed to validate decisions or to obtain a second confirmation from the user. Usually, require "yes" or "no" answers.
InputUsed to receive data and they usually include input areas that the user can interact with.

Examples

Information

import { Button, Heading, HFlow, Icon, Modal, ModalBody } from '@lemonade/ui'
import React, { useState } from 'react'

function InformationDemo() {
  const [isOpen, setIsOpen] = useState(false)

  const handleButtonClick = () => setIsOpen(true)
  const handleModalClose = () => setIsOpen(false)

  return (
    <>
      <Button kind='primary' onClick={handleButtonClick}>
        Open modal
      </Button>
      <Modal size='small' onClose={handleModalClose} open={isOpen}>
        <ModalBody>
          <HFlow alignItems='center'>
            <Icon icon='infoCircleOutline' style={{ marginRight: '0.5rem' }} size={3} fill='info' />
            <div>
              <Heading level={1}>Information Modal</Heading>
              <Heading level={5}>Subtitle</Heading>
            </div>
          </HFlow>
          <br />
          <p>
            Used to display information that does not require user input. They usually display only text that does not
            need to be displayed directly on the screen.
          </p>
        </ModalBody>
      </Modal>
    </>
  )
}

export default InformationDemo

Confirmation

import { Button, Heading, HFlow, Icon, Modal, ModalBody, ModalFooter } from '@lemonade/ui'
import React, { useState } from 'react'

function ConfirmationDemo() {
  const [isOpen, setIsOpen] = useState(false)

  const handleButtonClick = () => setIsOpen(true)
  const handleModalClose = () => setIsOpen(false)

  return (
    <>
      <Button kind='primary' onClick={handleButtonClick}>
        Open modal
      </Button>
      <Modal size='small' onClose={handleModalClose} open={isOpen}>
        <ModalBody>
          <HFlow alignItems='center'>
            <Icon icon='infoCircleOutline' style={{ marginRight: '0.5rem' }} size={3} fill='info' />
            <Heading level={1}>Confirmation Modal</Heading>
          </HFlow>
          <br />
          <p>
            Used to validate decisions or to obtain a second confirmation from the user. Usually, require "yes" or "no"
            answers.
          </p>
        </ModalBody>
        <ModalFooter>
          <HFlow justifyContent='flex-end'>
            <Button onClick={handleModalClose}>No</Button>
            <Button kind='primary' onClick={handleModalClose}>
              Yes
            </Button>
          </HFlow>
        </ModalFooter>
      </Modal>
    </>
  )
}

export default ConfirmationDemo

Danger Action

import { Button, Heading, HFlow, Icon, Modal, ModalBody, ModalFooter, Text } from '@lemonade/ui'
import React, { useState } from 'react'

function DangerDemo() {
  const [isOpen, setIsOpen] = useState(false)

  const handleButtonClick = () => setIsOpen(true)
  const handleModalClose = () => setIsOpen(false)

  return (
    <>
      <Button kind='primary' onClick={handleButtonClick}>
        Open modal
      </Button>

      <Modal size='small' onClose={handleModalClose} open={isOpen}>
        <ModalBody>
          <HFlow alignItems='center'>
            <Icon icon='exclamationTriangleOutline' style={{ marginRight: '0.5rem' }} size={3} fill='danger' />
            <div>
              <Heading level={1}>Danger action</Heading>
              <Heading level={5}>Subtitle</Heading>
            </div>
          </HFlow>
          <br />
          <p>
            Used to validate actions that have a critical effect on the system and that can't be undone, such as
            "deleting all items". Use labels that reflect the action that will occur. Avoid using labels like "OK" and
            "Cancel".
          </p>
        </ModalBody>
        <ModalFooter>
          <HFlow justifyContent='flex-end'>
            <Button onClick={handleModalClose}>Discard</Button>
            <Button kind='danger' onClick={handleModalClose}>
              <Icon icon='trashOutline' style={{ marginRight: '0.5rem' }} />
              <Text color='inherit'>Delete all</Text>
            </Button>
          </HFlow>
        </ModalFooter>
      </Modal>
    </>
  )
}

export default DangerDemo