Modal

O componente Modal nos permite chamar a atenção do usuario para um box flutuante que pode ter texto, ações ou forms para realizar tarefas mudando o focus desde o background. É um componente intrusivo já que interrompe a operação do usuario para apresentar uma mensagem ou conteúdo.

import React from "react";
import { Modal, Text, Box } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <Modal open onDismiss={() => console.log("close")}>
    <Modal.Header title="Title" />
    <Modal.Body>
      <Box
        borderColor="neutral-interactive"
        borderStyle="dashed"
        borderWidth="1"
        padding="2"
      >
        <Text fontSize="base" textAlign="center">
          Replace me with your content
        </Text>
      </Box>
    </Modal.Body>
  </Modal>
);

export default Example;

Ver no Figma

Anatomia do componente

O componente é composto de um fundo translúcido em tela completa e um box flutuante centralizado com cantos arredondados e sombra com um padding opcional.

Guidelines

Utilizamos o componente para apresentar diálogos ou opções para o usuario que deve completar antes de continuar a operação. São intrusivos já que eles interrompem completamente a navegação, porém devem ser usados ocasionalmente.

O Modal deve apresentar ações para o usuario. As ações devem formar parte do footer do modal, e devem estar localizados no lado direito.

O Modal deve poder ser fechado usando o botão de X no header, fazendo clic fora do conteiner ou pressionando a tecla ESC no teclado.

Evite seu uso para formularios muito longos ou telas com muitas opções.

Recomendações de uso

Confirmar a exclusão de um elemento.
Apresentar opções como filtros em listas.
Confirmar uma ação antes de avançar para outra instância.

Componentes relacionados

Popover - É um elemento flutuante que pode ser usado para apresentar informações ou ações de forma não intrusiva.
Alert - É um componente que apresenta informação crítica ou sensível para o usuario de forma não intrusiva dentro de um contexto de uma tela.

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/modal

Props

Additional props are passed to the <Modal> element. See div docs for a list of props accepted by the <Modal> element.