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.

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;

Instalá el componente via terminal.

npm install @nimbus-ds/side-modal

Side Modal

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.

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.
  • 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.
  • 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).

El Side Modal puede incluir:

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

Requiere:

  • Button
  • Text-field
  • Icon
  • Divider

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.

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

SideModal

NameTypeDefaultDescription

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;