Pular para o conteúdo principal
Lemonade

Modal

O componente é utilizado para apresentar conteúdos em um nível acima do restante da interface. É utilizado quando há a necessidade de visualizar, criar ou editar um conteúdo, ou para mensagens de confirmação. Nenhuma outra informação da página que gerou o modal pode ser acessada enquanto o mesmo estiver ativo.

Boas práticas

  • Utilize modais com cautela, pois eles interrompem o fluxo de uso do produto.
  • O título deve refletir a ação ou botão que foi clicado pelo usuário.
  • Podem ser fechados tanto pelo ícone de fechar, como pressionando ESC ou clicando fora da área do modal, se nenhuma ação tiver sido executada no contexto do modal.
  • Mantenha o foco anterior do usuário após fechar o modal.

Tipos de Modal

InformaçãoUsados para exibir informações que não requerem input do usuário. Normalmente exibem somente textos que não precisam ser exibidos diretamente na tela.
ConfirmaçãoUsados para validar decisões ou para obter uma segunda confirmação do usuário. Normalmente requerem respostas do usuário.
Entrada de dadosSão utilizados para receber dados e incluem áreas de input que o usuário pode interagir.

Exemplos

Informação

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

Confirmação

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

Ação perigosa

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