Side Modal
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
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' | Header padding. | |
paddingBody | 'base' | Body padding. | |
paddingFooter | 'base' | 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' | 'base' | The padding properties are used to generate space around an sidebar's content area. |
position | 'left' | 'right' | Side from which the sidebar will appear. |
zIndex | '100' | 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; |