Side Modal
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
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; |