Modal

El componente Modal nos permite atraer la atención de la persona usuaria hacia un cuadro emergente que puede contener texto, acciones o formularios para realizar tareas cambiando el foco desde la operación que permanece en segundo plano. Es un componente intrusivo ya que interrumpe la operación habitual para exponer un mensaje o contenido.

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 en Figma

Anatomía del componente

Se compone de un fondo traslúcido a pantalla completa y un contenedor flotante centrado con bordes redondeados y sombra con un padding opcional.

Guidelines

Usamos el componente para mostrar diálogos o presentar opciones a la persona usuaria que debe resolver antes de continuar operando. Son de caracter intrusivo ya que interrumpen completamente la navegación. Es por esto que debemos usarlos muy ocasionalmente.

El Modal debería siempre presentar a la persona usuaria con acciones para llevar a cabo. Las mismas deben formar parte del footer del modal, y se ubican del lado derecho del mismo.

El Modal debería cerrarse siempre mediante el botón de X en el header, haciendo click fuera del contenedor, o apretando la tecla ESC en el teclado.

Evitar su uso para formularios largos o ventanas con muchas opciones.

Recomendaciones de uso

Confirmar la eliminación de un elemento
Presentar opciones como filtros u ordenamiento en listas
Confirmar una acción antes de pasar a otra instancia

Componentes relacionados

Popover - Es un elemento flotante que puede ser usado para presentar información o acciones de forma poco intrusiva.
Alert - Es un componente que muestra información crítica o sensible a la persona usuaria de forma no intrusiva dentro del contexto de una página.

Implementación

Instalá el 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.