Popup
Overlay flutuante leve posicionado relativo a um trigger. Diferente do Modal (bloqueante, centralizado) e do Tooltip (passivo, sem interação), o popup permite conteúdo interativo e fecha ao clicar fora. Dark mode automático via variáveis semânticas.
Uso
Quando e como utilizar cada variante e posição do popup.
- Bottom (padrão) — Contexto adicional abaixo de um botão ou campo.
- Top — Quando o espaço abaixo do trigger é insuficiente.
- Left / Right — Popups laterais para informações complementares em tabelas ou listas.
- Small — Mensagens curtas ou ações rápidas com pouco conteúdo.
- Large — Formulários inline ou conteúdo rico com mais espaço.
Exemplos
Veja abaixo os exemplos interativos do popup com todas as suas posições e variações.
Carregando exemplo...
Anatomia
Estrutura interna do componente e seus elementos.
| Parte | Elemento | Descrição |
|---|---|---|
| Wrapper | .popup-wrapper | Container relativo que engloba trigger e popup |
| Container | .popup | O painel flutuante; recebe o modificador de posição |
| Seta | .popup__arrow | Pseudo-elemento triangular que aponta ao trigger |
| Conteúdo | .popup__content | Área de conteúdo com padding interno |
| Header | .popup__header | Linha opcional com título e botão de fechar |
| Título | .popup__title | Texto do título, Inter 14px w600 |
| Fechar | .popup__close | Botão ícone no canto superior direito |
| Rodapé | .popup__footer | Área de ações, separada por borda superior |
Propriedades
Classes, estados e atributos disponíveis para configurar o popup.
| Propriedade | Tipo | Default | Descrição |
|---|---|---|---|
.popup | classe | — | Container principal do popup flutuante. |
.popup__content | classe | — | Área de conteúdo interno do popup. |
.popup__header | classe | — | Cabeçalho opcional com título e botão de fechar. |
.popup__title | classe | — | Título do popup, Inter 14px w600. |
.popup__close | classe | — | Botão de fechar posicionado no header. |
.popup__footer | classe | — | Rodapé opcional para ações. |
.popup__arrow | classe | — | Seta apontando para o trigger (pseudo-elemento). |
.popup-wrapper | classe | — | Wrapper de posicionamento relativo ao trigger. |
.popup--top | classe | — | Posiciona o popup acima do trigger. |
.popup--bottom | classe | — | Posiciona o popup abaixo do trigger (padrão). |
.popup--left | classe | — | Posiciona o popup à esquerda do trigger. |
.popup--right | classe | — | Posiciona o popup à direita do trigger. |
.popup--sm | classe | — | Largura máxima reduzida: 240px. |
.popup--lg | classe | — | Largura máxima ampliada: 480px. |
.is-open | estado | — | Torna o popup visível (adicionada via JS). |
data-arenito="popup" | atributo | — | Inicializa o comportamento JS automaticamente. |
data-popup-target | atributo | — | Selector do popup que o trigger controla. |
Código
Snippets prontos para copiar e usar no seu projeto.
Popup básico com inicialização automática
html
<div class="popup-wrapper">
<button class="btn btn-secondary"
data-arenito="popup"
data-popup-target="#popup-info">
Mais informações
</button>
<div class="popup popup--bottom" id="popup-info" role="dialog" aria-modal="true">
<div class="popup__arrow"></div>
<div class="popup__content">
<p>Conteúdo contextual do popup.</p>
</div>
</div>
</div>Popup com header e rodapé
html
<div class="popup-wrapper">
<button class="btn btn-secondary"
data-arenito="popup"
data-popup-target="#popup-acoes">
Opções
</button>
<div class="popup popup--bottom" id="popup-acoes" role="dialog" aria-modal="true">
<div class="popup__arrow"></div>
<div class="popup__header">
<span class="popup__title">Opções de exportação</span>
<button class="popup__close" aria-label="Fechar">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
viewBox="0 0 48 48" fill="none" stroke="currentColor"
stroke-width="3" stroke-linecap="round">
<path d="M8 8L40 40"/>
<path d="M8 40L40 8"/>
</svg>
</button>
</div>
<div class="popup__content">
<p>Escolha o formato de exportação do relatório.</p>
</div>
<div class="popup__footer">
<button class="btn btn-sm btn-outline">Cancelar</button>
<button class="btn btn-sm btn-primary">Exportar PDF</button>
</div>
</div>
</div>Posicionamento lateral
html
<!-- À direita do trigger -->
<div class="popup-wrapper">
<button class="btn btn-ghost" data-arenito="popup" data-popup-target="#popup-lateral">
Ajuda
</button>
<div class="popup popup--right" id="popup-lateral" role="dialog">
<div class="popup__arrow"></div>
<div class="popup__content">
<p>Dica contextual de preenchimento.</p>
</div>
</div>
</div>Inicialização programática
javascript
import { initPopup, openPopup, closePopup } from './components/popup.js';
// Inicializar manualmente
const popup = initPopup(document.getElementById('popup-info'));
// Abrir e fechar via JS
openPopup(document.getElementById('popup-info'));
closePopup(document.getElementById('popup-info'));Eventos
Eventos customizados disparados pelo componente.
javascript
const popupEl = document.getElementById('popup-info');
popupEl.addEventListener('arenito:popup:open', (e) => {
console.log('Popup aberto', e.detail.popup);
});
popupEl.addEventListener('arenito:popup:close', (e) => {
console.log('Popup fechado', e.detail.popup);
});| Evento | Descrição | detail |
|---|---|---|
arenito:popup:open | Disparado ao abrir o popup | { popup } |
arenito:popup:close | Disparado ao fechar o popup | { popup } |
Design
Especificações visuais e tokens utilizados no componente.
Especificações
| Propriedade | Valor |
|---|---|
| max-width padrão | 320px |
max-width --sm | 240px |
max-width --lg | 480px |
| border-radius | 8px |
| padding (conteúdo) | 16px |
| padding (header/footer) | 12px 16px |
| z-index | 1100 |
| Sombra | 0 4px 16px rgba(0,0,0,0.12) |
| Animação | fade + translateY 4px, 150ms ease |
Tokens utilizados
| Elemento | Token |
|---|---|
| Fundo | --surface-overlay-neutral-container-default |
| Borda | --border-overlay-neutral-default |
| Título | --text-overlay-neutral-default |
| Conteúdo | --text-overlay-neutral-secondary |
| Seta (fundo) | --surface-overlay-neutral-container-default |
| Seta (borda) | --border-overlay-neutral-default |
| Rodapé (borda) | --border-overlay-neutral-default |