← Catálogooverlay · stable

Modal

Diálogo com foco contido, fechamento explícito e backdrop. A documentação abaixo separa composição, comportamento e adaptação visual de cada variante.

QUANDO USAR

Use Modal quando a interface precisar de diálogo com foco contido, fechamento explícito e backdrop.

QUANDO NÃO USAR

Evite a família quando uma composição semântica mais simples comunicar a mesma ação com menos carga visual.

TECLADO

A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

RESPONSIVO

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Ver prévias

CONTAINER · stable

Básico (default)

Básico (default), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <button class="sc-btn sc-btn-primary" type="button" data-modal-open="demoModal">Abrir modal</button>
                    <button class="sc-btn sc-btn-outline" type="button" data-modal-open="demoModal">Abrir (outline)</button>
                  </div><div class="sc-modal" id="demoModal">
                    <div class="sc-modal-backdrop"></div>
                    <div class="sc-modal-panel" role="document">
                      <div class="sc-modal-header">
                        <h3 class="sc-modal-title">Modal Smart UI</h3>
                        <button class="sc-modal-close" type="button" data-modal-close="" aria-label="Fechar"></button>
                      </div>
                      <div class="sc-modal-body">
                        <p class="doc-muted">Este modal fecha por backdrop, botão, ESC e faz trap de TAB dentro.</p>
                        <input class="sc-input" placeholder="Campo para testar foco">
                        <button class="sc-btn sc-btn-glass" type="button">Outro foco</button>
                      </div>
                      <div class="sc-modal-footer">
                        <button class="sc-btn sc-btn-glass" type="button" data-modal-close="">Cancelar</button>
                        <button class="sc-btn sc-btn-primary" type="button" data-modal-close="">OK</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-btnsc-btn-primarysc-btn-outlinesc-modalsc-modal-backdropsc-modal-panelsc-modal-headersc-modal-titlesc-modal-closesc-modal-bodysc-inputsc-btn-glasssc-modal-footer

Inicialize modal após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: modal
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Confirmação

Confirmação, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <button class="sc-btn sc-btn-glass" type="button" data-modal-open="demoModal2">Abrir confirmação</button>
                  </div><div class="sc-modal" id="demoModal2">
                    <div class="sc-modal-backdrop"></div>
                    <div class="sc-modal-panel" role="document">
                      <div class="sc-modal-header">
                        <h3 class="sc-modal-title">Confirmação</h3>
                        <button class="sc-modal-close" type="button" data-modal-close="" aria-label="Fechar"></button>
                      </div>
                      <div class="sc-modal-body">
                        <p class="doc-muted">Modelo rápido para confirmação.</p>
                      </div>
                      <div class="sc-modal-footer">
                        <button class="sc-btn sc-btn-outline" type="button" data-modal-close="">Voltar</button>
                        <button class="sc-btn sc-btn-primary" type="button" data-modal-close="">Confirmar</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-btnsc-btn-glasssc-modalsc-modal-backdropsc-modal-panelsc-modal-headersc-modal-titlesc-modal-closesc-modal-bodysc-modal-footersc-btn-outlinesc-btn-primary

Inicialize modal após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: modal
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Small

Small, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <button class="sc-btn sc-btn-outline" type="button" data-modal-open="demoModalSm">Abrir small</button>
                  </div><div class="sc-modal" id="demoModalSm">
                    <div class="sc-modal-backdrop"></div>
                    <div class="sc-modal-panel sc-modal-panel--sm" role="document">
                      <div class="sc-modal-header">
                        <h3 class="sc-modal-title">Modal pequeno</h3>
                        <button class="sc-modal-close" type="button" data-modal-close="" aria-label="Fechar"></button>
                      </div>
                      <div class="sc-modal-body">
                        <p class="doc-muted">Ideal para confirmações.</p>
                      </div>
                      <div class="sc-modal-footer">
                        <button class="sc-btn sc-btn-glass" type="button" data-modal-close="">OK</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-btnsc-btn-outlinesc-modalsc-modal-backdropsc-modal-panelsc-modal-panel--smsc-modal-headersc-modal-titlesc-modal-closesc-modal-bodysc-modal-footersc-btn-glass

Inicialize modal após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: modal
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Large (grid)

Large (grid), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <button class="sc-btn sc-btn-outline" type="button" data-modal-open="demoModalLg">Abrir large</button>
                  </div><div class="sc-modal" id="demoModalLg">
                    <div class="sc-modal-backdrop"></div>
                    <div class="sc-modal-panel sc-modal-panel--lg" role="document">
                      <div class="sc-modal-header">
                        <h3 class="sc-modal-title">Modal grande</h3>
                        <button class="sc-modal-close" type="button" data-modal-close="" aria-label="Fechar"></button>
                      </div>
                      <div class="sc-modal-body">
                        <div class="sc-grid sc-cols-2 sc-gap-4">
                          <div class="sc-card sc-card-outline sc-card-compact">Coluna A</div>
                          <div class="sc-card sc-card-outline sc-card-compact">Coluna B</div>
                        </div>
                      </div>
                      <div class="sc-modal-footer">
                        <button class="sc-btn sc-btn-outline" type="button" data-modal-close="">Cancelar</button>
                        <button class="sc-btn sc-btn-primary" type="button" data-modal-close="">Salvar</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-btnsc-btn-outlinesc-modalsc-modal-backdropsc-modal-panelsc-modal-panel--lgsc-modal-headersc-modal-titlesc-modal-closesc-modal-bodysc-gridsc-cols-2sc-gap-4sc-cardsc-card-outlinesc-card-compactsc-modal-footersc-btn-primary

Inicialize modal após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: modal
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Fullscreen

Fullscreen, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <button class="sc-btn sc-btn-outline" type="button" data-modal-open="demoModalFull">Abrir fullscreen</button>
                  </div><div class="sc-modal" id="demoModalFull">
                    <div class="sc-modal-backdrop"></div>
                    <div class="sc-modal-panel sc-modal-panel--fullscreen" role="document">
                      <div class="sc-modal-header">
                        <h3 class="sc-modal-title">Fullscreen</h3>
                        <button class="sc-modal-close" type="button" data-modal-close="" aria-label="Fechar"></button>
                      </div>
                      <div class="sc-modal-body">
                        <p class="doc-muted">atil para editores, fluxos complexos e telas cheias.</p>
                        <div class="sc-card sc-card-outline">Conteúdo</div>
                      </div>
                      <div class="sc-modal-footer">
                        <button class="sc-btn sc-btn-glass" type="button" data-modal-close="">Fechar</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-btnsc-btn-outlinesc-modalsc-modal-backdropsc-modal-panelsc-modal-panel--fullscreensc-modal-headersc-modal-titlesc-modal-closesc-modal-bodysc-cardsc-card-outlinesc-modal-footersc-btn-glass

Inicialize modal após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: modal
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Side sheet

Side sheet, preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <button class="sc-btn sc-btn-outline" type="button" data-modal-open="demoModalSide">Abrir side sheet</button>
                  </div><div class="sc-modal" id="demoModalSide">
                    <div class="sc-modal-backdrop"></div>
                    <div class="sc-modal-panel sc-modal-panel--side" role="document">
                      <div class="sc-modal-header">
                        <h3 class="sc-modal-title">Side sheet</h3>
                        <button class="sc-modal-close" type="button" data-modal-close="" aria-label="Fechar"></button>
                      </div>
                      <div class="sc-modal-body">
                        <div class="sc-field">
                          <label class="sc-label" for="sideTitle">Título</label>
                          <input id="sideTitle" class="sc-input" placeholder="Ex.: Meu item">
                        </div>
                        <div class="sc-field">
                          <label class="sc-label" for="sideDesc">Descrição</label>
                          <textarea id="sideDesc" class="sc-textarea" placeholder="Detalhes⬦"></textarea>
                        </div>
                      </div>
                      <div class="sc-modal-footer">
                        <button class="sc-btn sc-btn-outline" type="button" data-modal-close="">Cancelar</button>
                        <button class="sc-btn sc-btn-primary" type="button" data-modal-close="">Salvar</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-btnsc-btn-outlinesc-modalsc-modal-backdropsc-modal-panelsc-modal-panel--sidesc-modal-headersc-modal-titlesc-modal-closesc-modal-bodysc-fieldsc-labelsc-inputsc-textareasc-modal-footersc-btn-primary

Inicialize modal após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: modal
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Form (cadastro rápido)

Form (cadastro rápido), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <button class="sc-btn sc-btn-primary" type="button" data-modal-open="demoModalForm">Abrir form</button>
                  </div><div class="sc-modal" id="demoModalForm">
                    <div class="sc-modal-backdrop"></div>
                    <div class="sc-modal-panel" role="document">
                      <div class="sc-modal-header">
                        <h3 class="sc-modal-title">Novo cliente</h3>
                        <button class="sc-modal-close" type="button" data-modal-close="" aria-label="Fechar"></button>
                      </div>
                      <div class="sc-modal-body">
                        <div class="sc-grid sc-cols-2 sc-gap-3">
                          <div class="sc-field">
                            <label class="sc-label" for="mName">Nome</label>
                            <input id="mName" class="sc-input" placeholder="Ex.: Maria">
                          </div>
                          <div class="sc-field">
                            <label class="sc-label" for="mPhone">Telefone</label>
                            <input id="mPhone" class="sc-input" placeholder="(11) 99999-9999">
                          </div>
                        </div>
                        <div class="sc-field">
                          <label class="sc-label" for="mEmail">E-mail</label>
                          <input id="mEmail" class="sc-input" placeholder="maria@email.com">
                        </div>
                        <div class="sc-field">
                          <label class="sc-label" for="mNote">Observação</label>
                          <textarea id="mNote" class="sc-textarea" placeholder="Notas⬦"></textarea>
                        </div>
                      </div>
                      <div class="sc-modal-footer">
                        <button class="sc-btn sc-btn-outline" type="button" data-modal-close="">Cancelar</button>
                        <button class="sc-btn sc-btn-primary" type="button" data-modal-close="">Salvar</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-btnsc-btn-primarysc-modalsc-modal-backdropsc-modal-panelsc-modal-headersc-modal-titlesc-modal-closesc-modal-bodysc-gridsc-cols-2sc-gap-3sc-fieldsc-labelsc-inputsc-textareasc-modal-footersc-btn-outline

Inicialize modal após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: modal
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

CONTAINER · stable

Conteúdo longo (scroll)

Conteúdo longo (scroll), preservado do laboratório original e isolado para uso e teste independente.

TemaModo

Link direto →

HTML e exemplo

<div style="display:flex; gap:10px; flex-wrap:wrap;">
                    <button class="sc-btn sc-btn-glass" type="button" data-modal-open="demoModalScroll">Abrir conteúdo longo</button>
                  </div><div class="sc-modal" id="demoModalScroll">
                    <div class="sc-modal-backdrop"></div>
                    <div class="sc-modal-panel" role="document">
                      <div class="sc-modal-header">
                        <h3 class="sc-modal-title">Termos (exemplo)</h3>
                        <button class="sc-modal-close" type="button" data-modal-close="" aria-label="Fechar"></button>
                      </div>
                      <div class="sc-modal-body">
                        <p class="doc-muted">Esse modelo testa scroll interno do modal (conteúdo maior que a tela).</p>
                        <div class="sc-card sc-card-outline sc-card-compact">
                          <p style="margin:0;">1) Uso permitido conforme a política.</p>
                          <p style="margin:10px 0 0;">2) Dados são processados com segurança.</p>
                          <p style="margin:10px 0 0;">3) Cancelamento pode ser solicitado a qualquer momento.</p>
                          <p style="margin:10px 0 0;">4) Este texto é apenas um placeholder.</p>
                          <p style="margin:10px 0 0;">5) Repetição para simular conteúdo longo.</p>
                          <p style="margin:10px 0 0;">6) Repetição para simular conteúdo longo.</p>
                          <p style="margin:10px 0 0;">7) Repetição para simular conteúdo longo.</p>
                          <p style="margin:10px 0 0;">8) Repetição para simular conteúdo longo.</p>
                          <p style="margin:10px 0 0;">9) Repetição para simular conteúdo longo.</p>
                          <p style="margin:10px 0 0;">10) Repetição para simular conteúdo longo.</p>
                        </div>
                      </div>
                      <div class="sc-modal-footer">
                        <button class="sc-btn sc-btn-outline" type="button" data-modal-close="">Fechar</button>
                        <button class="sc-btn sc-btn-primary" type="button" data-modal-close="">Aceitar</button>
                      </div>
                    </div>
                  </div>

Classes, JavaScript e API

sc-btnsc-btn-glasssc-modalsc-modal-backdropsc-modal-panelsc-modal-headersc-modal-titlesc-modal-closesc-modal-bodysc-cardsc-card-outlinesc-card-compactsc-modal-footersc-btn-outlinesc-btn-primary

Inicialize modal após o DOM. Os atributos data-* do exemplo são a API declarativa.

Plugin: modal
Dependências: smart-ui.js
Desde: 0.1.0

Acessibilidade, teclado e movimento

Foco visível e ordem de leitura preservados.
Rótulos acessíveis devem acompanhar controles sem texto.
A interação preserva foco visível, ordem lógica de Tab e acionamento por Enter ou Espaço quando aplicável.

Não depende de movimento contínuo.

Temas e responsividade

Compatível com os temas Default, Clean e Tech nos modos claro, escuro e sistema.

As composições reduzem colunas, preservam alvos de toque e evitam rolagem horizontal a partir de 320 px.

Modal

Componentes relacionados