Side Modal

1.7.7

El Side Modal es un patrón de superposición lateral que permite al usuario interactuar con contenido adicional sin abandonar la vista principal. Aparece desde el borde derecho o izquierdo de la pantalla, sin bloquear completamente el fondo, lo que favorece la continuidad del contexto y la multitarea. Su objetivo es facilitar flujos secundarios, edición rápida o tareas complementarias a la vista principal.

Default

import React, { useState } from "react";
import { SideModal } from "@nimbus-ds/patterns";
import { Box, Button, Icon, Text } from "@nimbus-ds/components";
import { CheckCircleIcon, ChevronLeftIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => {
  const [open, setOpen] = useState(false);
  const handleOpen = () => setOpen(!open);

  const headerAction = (
    <Box display="flex" alignItems="center" gap="1">
      <Icon color="primary-textHigh" source={<ChevronLeftIcon />} />
      <Text fontWeight="bold" fontSize="highlight">
        Formas de entrega
      </Text>
    </Box>
  );

  return (
    <>
      <Button onClick={handleOpen}>Open</Button>
      <SideModal
        onRemove={handleOpen}
        open={open}
        maxWidth={{ xs: "100%", md: "340px", lg: "540px" }}
        title="Instalar Kangu"
        headerIcon={
          <Icon color="primary-textHigh" source={<CheckCircleIcon />} />
        }
        padding="base"
        paddingHeader="none"
        paddingBody="none"
        paddingFooter="none"
        headerAction={headerAction}
        footer={{
          primaryAction: { children: "Button" },
          secondaryAction: { children: "Button", appearance: "primary" },
        }}
      >
        <Box
          borderStyle="dashed"
          borderWidth="1"
          borderColor="neutral-interactive"
          height="100%"
          boxSizing="border-box"
          display="flex"
          justifyContent="center"
          alignItems="center"
        >
          <Text textAlign="center" fontSize="base">
            Replace me with your content
          </Text>
        </Box>
      </SideModal>
    </>
  );
};

export default Example;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/side-modal

Side Modal

Cuándo usar

Utilizar el Side Modal cuando se necesite:

Permitir edición rápida o visualización de información secundaria sin redireccionar.
Mantener el contexto del usuario mientras se realiza una acción adicional (configuraciones, cargas de contenido, edición de datos).
Mostrar formularios, detalles de un ítem o confirmaciones avanzadas.

Cuándo no usar

No se recomienda usar el Side Modal cuando:

Cuando las acciones sean pocas y el objetivo sea brindar información contextual, la confirmación o validación de un proceso. En esos casos usar modal o toast
La acción requiere una atención completa y sin distracciones (ej. pasos críticos o legales).
El contenido es complejo y extenso, mejor presentado en una pantalla completa.

Criterios de productividad y usabilidad

Mantiene el foco sin pérdida de contexto: permite editar y volver al punto exacto donde estaba el usuario.
Evita abrir el side modal de manera innecesaria: priorizar la agilidad de las tareas y el acceso a configuraciones para edición sin necesidad de sacar de contexto al usuario.
Minimiza la fricción: abre rápido, carga parcial de contenido, feedback inmediato.
Permite atajos de teclado: para abrir/cerrar el modal o saltar entre campos.

Accesibilidad

Navegación completa por teclado (tab/shift+tab/escape).
Roles ARIA adecuados (role="dialog", aria-labelledby, aria-describedby).
Foco inicial en el primer campo o botón relevante al abrir.
Cierre accesible mediante teclado y control visible.
Áreas táctiles adecuadas en dispositivos mobiles (mínimo 44x44px).

Anatomía

El Side Modal puede incluir:

Header con título y botón de cierre
Body scrollable
Footer con acciones
Íconos contextuales

Dependencias

Requiere:

Button
Text-field
Icon
Divider

Do and Don'ts

✅ Do

Usar para tareas secundarias dentro de un flujo principal.
Cerrar automáticamente si se completa la tarea exitosamente.
Foco automático en el primer campo o botón al abrir.

❌ Don't

No incluir contenido complejo o multitarea dentro del modal.
No usar múltiples side modals anidados.
No dejar campos sin etiquetas o accesos sin foco.

Props

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

SideModal

Name	Type	Default	Description
title	string		Title.
titleAction	React.ReactNode		Action Title
headerAction	React.ReactNode		Action Header
headerIcon	React.ReactNode		Icon Header
children	React.ReactNode		Body Content
paddingHeader	'base' 'none'		Header padding.
paddingBody	'base' 'none'		Body padding.
paddingFooter	'base' 'none'		Footer padding.
footer	object		Footer element actions.
open	boolean	'true'	Determines if the sidebar is shown or not.
maxWidth	string	'375px'	The maxWidth property specifies the maxWidth of a sidebar's content area. 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" }'
padding	'base' 'none' 'small'	'base'	The padding properties are used to generate space around an sidebar's content area.
position	'left' 'right'	'right'	Side from which the sidebar will appear.
zIndex	'100' '200' '300' '400' '500' '600' '700' '800' '900'		The zIndex property specifies the stack order of the sidebar. 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" }'
onRemove	object		Callback fired when the component requests to be closed. () => void;