Side Modal

1.7.7

O Side Modal é um padrão de sobreposição lateral que permite ao usuário interagir com conteúdo adicional sem abandonar a visão principal. Aparece a partir da borda direita ou esquerda da tela, sem bloquear completamente o fundo, o que favorece a continuidade do contexto e a multitarefa. Seu objetivo é facilitar fluxos secundários, edição rápida ou tarefas complementares à visão 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;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/side-modal

Side Modal

Quando usar

Utilizar o Side Modal quando se necessita:

Permitir edição rápida ou visualização de informações secundárias sem redirecionamento.
Manter o contexto do usuário enquanto se realiza uma ação adicional (configurações, cargas de conteúdo, edição de dados).
Mostrar formulários, detalhes de um item ou confirmações avançadas.

Quando não usar

Não se recomenda usar o Side Modal quando:

Quando as ações são poucas e o objetivo é fornecer informações contextuais, confirmação ou validação de um processo. Nesses casos usar modal ou toast
A ação requer uma atenção completa e sem distrações (ex. passos críticos ou legais).
O conteúdo é complexo e extenso, melhor apresentado em uma tela completa.

Critérios de produtividade e usabilidade

Mantém o foco sem perda de contexto: permite editar e voltar ao ponto exato onde estava o usuário.
Evita abrir o side modal de maneira desnecessária: priorizar a agilidade das tarefas e o acesso a configurações para edição sem necessidade de tirar o usuário do contexto.
Minimiza a fricção: abre rápido, carga parcial de conteúdo, feedback imediato.
Permite atalhos de teclado: para abrir/fechar o modal ou saltar entre campos.

Acessibilidade

Navegação completa por teclado (tab/shift+tab/escape).
Roles ARIA adequados (role="dialog", aria-labelledby, aria-describedby).
Foco inicial no primeiro campo ou botão relevante ao abrir.
Fechamento acessível mediante teclado e controle visível.
Áreas táteis adequadas em dispositivos móveis (mínimo 44x44px).

Anatomia

O Side Modal pode incluir:

Header com título e botão de fechamento
Body scrollable
Footer com ações
Ícones contextuais

Dependências

Requer:

Button
Text-field
Icon
Divider

Do and Don'ts

✅ Do

Usar para tarefas secundárias dentro de um fluxo principal.
Fechar automaticamente se a tarefa for completada com sucesso.
Foco automático no primeiro campo ou botão ao abrir.

❌ Don't

Não incluir conteúdo complexo ou multitarefa dentro do modal.
Não usar múltiplos side modals aninhados.
Não deixar campos sem etiquetas ou acessos sem 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;