Componentes

Popover

Conteúdo flutuante sob demanda (filtros, dicas ricas).

Sobreposições e menus

Carregando demonstração…

Código da demo
"use client";

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

export function Demo() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Abrir popover</Button>
      </PopoverTrigger>
      <PopoverContent className="w-72">
        <PopoverHeader>
          <PopoverTitle>Dimensões</PopoverTitle>
          <PopoverDescription>
            Ajuste valores localmente. Esc fecha.
          </PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  );
}

Use

  • Conteúdo curto ancorado num gatilho: filtros, ajuda, atalhos.
  • Foco vai para dentro e volta ao gatilho ao fechar.

Não use

  • Não use para menu de ações: use DropdownMenu.
  • Não use para decisão que bloqueia: use Dialog.
Acessibilidade
Esc fecha; foco gerenciado; title/description quando modal-like.
Importar
import { Popover, PopoverTrigger, PopoverContent } from "@financeequity/ui/popover"

Neste repositório:

import { Popover, PopoverTrigger, PopoverContent } from "@/components/ui/popover"
Dependências
radix-ui