Popover

Overlay

Painel flutuante acionado por clique, para ações ou formulários curtos fora do fluxo principal da tela.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Popover } from "@trdr/ui/popover"

Uso

import { Popover, PopoverAnchor, PopoverClose, PopoverContent, PopoverTrigger } from "@trdr/ui/popover"

export function Exemplo() {
  return <Popover />
}

Props

PopoverPropsestende React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>
PopoverTriggerPropsestende React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger>
PopoverAnchorPropsestende React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Anchor>
PopoverContentPropsestende React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
PopoverClosePropsestende React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Close>

Quando usar

Use o popover para uma acao secundaria ou um formulario curto que nao justifica navegar para outra tela nem abrir um modal: preferencias rapidas, um filtro, confirmar um ajuste pequeno. Diferente do tooltip, o conteudo pode ter varios elementos e coisas clicaveis, e fica aberto ate o usuario clicar fora ou fechar explicitamente.

Quando nao usar

Nao use popover para fluxo critico ou destrutivo que precisa bloquear a tela (isso e um modal, com aria-modal), nem para uma explicacao de uma frase sobre um controle (isso e o Tooltip, mais leve porque abre por hover). Nao use para conteudo que so aparece por hover e nao precisa de interacao: isso e o HoverCard.

Anatomia

  • Popover: a raiz, controla o estado aberto/fechado.
  • PopoverTrigger (data-slot="popover-trigger"): o elemento que abre o popover ao ser clicado. Use asChild para que o filho (por exemplo um Button) vire o trigger.
  • PopoverAnchor (data-slot="popover-anchor"): ponto de ancoragem alternativo, para quando o elemento clicavel nao deve ser tambem a referencia de posicionamento do painel.
  • PopoverContent (data-slot="popover-content"): o painel, com seta (data-slot="popover-arrow") apontando para o trigger, dentro de um Portal.
  • PopoverClose (data-slot="popover-close"): botao de fechar, para compor dentro do PopoverContent quando o painel precisa de um X explicito alem do clique fora e do Escape.

Acessibilidade

O Radix ja marca PopoverContent com role="dialog" (nao modal, sem prender o foco por padrao). Isso tem uma implicacao direta: o axe cobra nome acessivel para todo elemento com esse papel. Sempre passe aria-label no PopoverContent, ou de um heading interno com id e referencie via aria-labelledby, como no exemplo desta pagina. Sem isso o componente passa visualmente mas falha em auditoria de acessibilidade.

Fecha com Escape (devolvendo o foco ao trigger) e ao clicar fora. Quando aberto, o foco entra no painel; use PopoverClose ou um botao proprio para permitir fechar sem sair pelo teclado.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="popover-anchor"][data-slot="popover-arrow"][data-slot="popover-close"][data-slot="popover-content"][data-slot="popover-trigger"]
12 tokens usados
bg-popoverborder-borderfill-popoveroutline-nonering-offset-2ring-offset-backgroundring-ringshadow-mdtext-b3text-content-tertiarytext-foregroundtext-popover-foreground