Popover

Componentes/Overlay e disclosure

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

Exibe conteúdo contextual breve em uma camada não modal ancorada a um trigger.

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 · React · shadcn/Base UI

Executado pela recipe React distribuída via shadcn e baseada em Base UI.

Carregando preview funcional…

Abrir playground React · shadcn/Base UI

Content Slot adicional · React · shadcn/Base UI

Executado pela recipe React distribuída via shadcn e baseada em Base UI.

Carregando preview funcional…

Abrir este exemplo em React · shadcn/Base UI

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

Composição React

import {
  Popover,
  PopoverClose,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@/components/ui/popover"
import { Button } from "@/components/ui/button"

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Detalhes</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader><PopoverTitle>Detalhes da ação</PopoverTitle></PopoverHeader>
    <PopoverClose label="Fechar popover" />
    <PopoverDescription>Conteúdo breve associado ao trigger.</PopoverDescription>
  </PopoverContent>
</Popover>

Implementação

Status

Beta

Distribuição

Source via shadcn

Instalação

Configure o namespace uma única vez na integração React.

npm

npx shadcn@latest add @tis/popover @tis/button

pnpm

pnpm dlx shadcn@latest add @tis/popover @tis/button

yarn

yarn dlx shadcn@latest add @tis/popover @tis/button

bun

bunx --bun shadcn@latest add @tis/popover @tis/button

Contrato público

Item do registry

@tis/popover

Provider

Base UI

Distribuição

Source copiado para a aplicação

Status

Beta

Arquitetura técnica

Abrir JSON do registry

Inspecionar source distribuído

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 da Base UI e teste conteúdo real, foco visível e nomes acessíveis na aplicação consumidora.

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