Popover
StableSuperfície ancorada e não modal, com header, título e descrição. Composto sobre Base UI Popover. A diferença para o Dialog é a proteção: aqui a página atrás continua viva e a superfície pode ser abandonada com um clique fora, então uma decisão que precisa ser concluída antes de seguir pertence ao Dialog. A diferença para o Tooltip é que aqui cabe o cursor.
Instalação
npx up-web-ds add popoverPreview
Default
With Form
Sides
With Content List
All states
Default
With Form
Sides
With Content List
Metadata
Classificação
- Layer
- Primitive
- Domínio
- Domain-free (compartilhado)
- Categoria
- overlay
- Status
- Stable
Origem e distribuição
- Fonte
- shadcn registry / popover
- Licença
- MIT
- Distribuição
- Interna
Acessibilidade
- Teclado: revisado
- Leitor de tela: revisado
- Touch: revisado
- Reduced motion: revisado
Teclado verificado por teste: Enter abre a partir do gatilho, o foco entra na superfície e pousa no primeiro controle, Tab percorre os demais, e Escape fecha devolvendo o foco ao gatilho — o mesmo acontece no fechamento explícito e no clique fora. Leitor de tela verificado por teste: o popup tem papel dialog nomeado pelo PopoverTitle e descrito pelo PopoverDescription, e aria-expanded no gatilho acompanha o estado real. Touch verificado em navegador com emulação de toque em viewport de 375px: gatilho e controles internos medem acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8, a superfície é limitada a calc(100vw-2rem) e o toque fora fecha. Reduced motion verificado com prefers-reduced-motion: reduce — os tokens de motion colapsam para 1ms e a animação de entrada mede 0.001s, sem perder a abertura.
Dependências
- Pacotes
- @base-ui/react
- Ícones
- Nenhum
- Construído sobre
- Nenhum
- Usado por
- Nenhum ainda