Popover

Sobreposição

Conteúdo flutuante preso a um botão, como um filtro de período.

Substitui no Brain:ui popover

Conteúdo preso a um botão

import { Button, Popover, PopoverClose, PopoverContent, PopoverTrigger } from "@paytime/ui";
import { CalendarDays } from "lucide-react";

export default function Example() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button tone="neutral" variant="outline" icon={<CalendarDays />}>Período</Button>
      </PopoverTrigger>
      <PopoverContent align="start" className="flex flex-col gap-3">
        <p className="text-[13px] text-fg-muted">Escolha o período do relatório.</p>
        <PopoverClose asChild>
          <Button size="sm" className="self-end">Aplicar</Button>
        </PopoverClose>
      </PopoverContent>
    </Popover>
  );
}