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.

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;

Instale o componente via terminal.

npm install @nimbus-ds/side-modal

Side Modal

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.

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

O Side Modal pode incluir:

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

Requer:

  • Button
  • Text-field
  • Icon
  • Divider

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.

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;