Uranus Design System

Camada flutuante ancorada a um gatilho para exibir conteúdo rico ou controles secundários

Popover abre um painel flutuante ancorado a um elemento da página. Use-o para conteúdo interativo que cabe em uma área pequena — filtros, formulários curtos, configurações rápidas. Para dicas de texto não-interativas prefira Tooltip; para fluxos que exigem atenção exclusiva prefira Dialog.

'use client';

import { Button, Popover, PopoverContent, PopoverTrigger } from '@uranus-workspace/design-system';
import { Settings2 } from 'lucide-react';

export default function PopoverDefault() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">
          <Settings2 />
          Preferências
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-72">
        <div className="space-y-2">
          <h4 className="text-sm font-semibold">Densidade</h4>
          <p className="text-sm text-muted-foreground">
            Escolha quanta informação aparece em cada tela. Você pode alterar a qualquer momento nas
            configurações da conta.
          </p>
        </div>
      </PopoverContent>
    </Popover>
  );
}

Anatomia

Popover — raiz que mantém o estado de aberto/fechado.
PopoverTrigger — elemento que alterna o popover. Use asChild para herdar um botão existente.
PopoverContent — o painel flutuante. Renderizado em um portal e posicionado automaticamente dentro da viewport.

Formulário inline

Popovers são ótimos para micro-formulários que não merecem um diálogo completo: compartilhar um link, adicionar uma etiqueta, filtrar uma lista.

'use client';

import {
  Button,
  Input,
  Label,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@uranus-workspace/design-system';

export default function PopoverForm() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Compartilhar link</Button>
      </PopoverTrigger>
      <PopoverContent className="w-80">
        <form className="grid gap-3">
          <div className="grid gap-1.5">
            <Label htmlFor="popover-share-email">E-mail do convidado</Label>
            <Input id="popover-share-email" type="email" placeholder="nome@empresa.com.br" />
          </div>
          <div className="flex justify-end gap-2">
            <Button type="submit" size="sm">
              Enviar convite
            </Button>
          </div>
        </form>
      </PopoverContent>
    </Popover>
  );
}

Uso

import {
  Button,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@uranus-workspace/design-system';

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Preferências</Button>
  </PopoverTrigger>
  <PopoverContent className="w-72">
    <p className="text-sm">Conteúdo do popover.</p>
  </PopoverContent>
</Popover>

Faça

Mantenha o conteúdo focado — uma tarefa, um grupo de controles.
Use align e side para ancorar o popover de forma previsível em relação ao trigger.
Feche o popover depois de uma ação bem-sucedida para devolver o foco ao trigger.

Não faça

Não coloque um popover dentro de outro — isso confunde o gerenciamento de foco.
Não use popover para informação essencial: se o usuário precisa dela para decidir, coloque no fluxo principal.
Não substitua Tooltip por Popover apenas para mostrar texto. Popovers abrem no clique; tooltips abrem no hover/foco.

Acessibilidade

Construído sobre Radix Popover — o foco vai automaticamente para o primeiro elemento focável dentro do conteúdo quando abre e retorna ao trigger ao fechar.
Esc fecha o popover. Clicar fora também fecha.
O trigger recebe aria-expanded e aria-controls automaticamente.
Se o popover abriga um formulário, combine com componentes de Field e Label para manter a leitura por tecnologias assistivas consistente.

Popover

Anatomia

Formulário inline

Uso

Faça

Não faça

Acessibilidade

On this page