Popover

Componentes/Overlay e disclosure

ImplementaçãoHTML/CSS/JSArk/ZagReact · shadcn/Base UIAngular

Adapter React independente em que Ark UI fornece as parts e Zag mantém estado, posicionamento e comportamento.

DesignUsoImplementaçãoAcessibilidade

Seção da documentaçãoDesignUsoImplementaçãoAcessibilidade

Design

Anatomia

Abrir popover 1 6

2

Título do Popover

3

Conteúdo contextual breve.

4

Cancelar Confirmar 5

1. Trigger — Button que controla abertura e aria-expanded.
2. Panel — superfície elevada com role="dialog".
3. Header — title opcional e close absoluto.
4. Body — Content Text e Content Slot independentes.
5. Actions — até dois Buttons substituíveis e ocultáveis separadamente.
6. Arrow — Shape fechada que aponta para o trigger.

Exemplo interativo · Ark/Zag

Executado pelo adapter independente Ark UI com comportamento Zag.

Carregando preview funcional…

Abrir playground Ark/Zag

Content Slot adicional · Ark/Zag

Executado pelo adapter Ark UI/Zag, sem reutilizar o runtime Web ou Base UI.

Carregando preview funcional…

Abrir este exemplo em Ark/Zag

Placements

Modifier	Posição do panel
ds-popover--bottom	Abaixo do trigger
ds-popover--top	Acima do trigger
ds-popover--left	À esquerda do trigger
ds-popover--right	À direita do trigger

Mapeamento de tokens

Parte	Component tokens
Panel	component.popover.panel.{bg,border-color,border-width,gap,max-width,padding-x,padding-y,radius,shadow}.default
Title / Body	component.popover.title.color.default, component.popover.body.{color,gap,padding-bottom}.default
Close	component.popover.close.{size,icon-size,padding,color}.default, component.popover.close.icon.stroke-width.default
Content Slot	component.popover.content-slot.gap.default
Actions	component.popover.actions.{gap,padding-top}.default
Arrow	component.popover.arrow.{base,fill}.default

Uso

Quando usar

Use Popover quando

O conteúdo contextual precisa de ações, links, um campo simples ou explicação mais rica que Tooltip, sem bloquear o restante da página.

Não use Popover quando

O conteúdo é somente um label curto (use Tooltip), exige decisão bloqueante ou fluxo longo (use Modal), ou representa uma lista de comandos (use Menu).

Relacionados

Tooltip Menu Modal Button

Quando escolher esta saída

Adote este adapter em projetos que escolheram Ark UI e Zag como arquitetura comportamental. Não o importe dentro da saída shadcn/Base UI.

Implementação

Status

Beta

Distribuição

Adapter de source

Source do adapter

packages/react/src/ark/popover.jsx

import {
  Popover,
  PopoverContent,
  PopoverTitle,
  PopoverTrigger,
} from '@tis/react/ark/popover'

Beta de workspace

Este caminho é um contrato de workspace, não um pacote público. Ainda não se anuncia instalação por package manager.

Acessibilidade

Acessibilidade e teclado

Entrada	Comportamento
Enter / Space	O Button trigger abre ou fecha pelo comportamento nativo de click.
Escape	Fecha o Popover e retorna foco ao trigger.
Tab	Segue a ordem natural; não há focus trap.
role="dialog"	Use aria-labelledby para title visível ou aria-label quando não houver header.

Responsabilidade da saída

Preserve a semântica Ark/Zag e valide Escape, interação externa, relações ARIA e retorno de foco.

Evidência de validação

Coberta pelo Storybook da saída independente e por verificações de browser, responsividade, teclado, Axe e bundle.

Abrir referência estável