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.

Modal

Name	Type	Default	Description
children*	React.ReactNode		The content of the modal.
open*	boolean		Whether the modal is open or not.
onDismiss	(open: boolean) => void;		Callback fired when the component requests to be closed.
portalId	string		Id to be embedded in the portal element
padding	'base' 'none' 'small'	'base'	The padding properties are used to generate space around an modal's content area.
maxWidth	string	'{ xs: "100%", md: "500px" }'	The maxWidth property specifies the maxWidth of a modal's content area. The width of the modal will be defined by the width of the content in this prop. This is a responsive property and you can have the options below available for you to use. '{ "xs": "value", "md": "value", "lg": "value", "xl": "value" }'

Modal.Body

Name	Type	Default	Description
children*	React.ReactNode		The content of the modal body.
padding	'base' 'none' 'small'	'none'	The padding properties are used to generate space around an modal's body content area.

Modal.Footer

Name	Type	Default	Description
children*	React.ReactNode		The content of the modal footer.
padding	'base' 'none' 'small'	'none'	The padding properties are used to generate space around an modal's footer content area.

Modal.Header

Name	Type	Default	Description
children	React.ReactNode		The content of the modal header.
title	string		The title to display in the modal header.
padding	'base' 'none' 'small'	'none'	The padding properties are used to generate space around an modal's header content area.