Popover
Superfície flutuante do Radix, ancorada num gatilho. Base do DatePicker, do MonthYearPicker, do Combobox e do ColorPicker. Fecha com Esc ou clique fora e devolve o foco ao gatilho.
Detalhe rápido
Informação que não cabe na linha da tabela, sem tirar a pessoa da página.
Com formulário curto
Ações de um passo só. Para fluxos maiores, use Dialog.
Alinhamento
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| open / defaultOpen | boolean | — | Popover: abertura controlada ou inicial. |
| onOpenChange | (open: boolean) => void | — | Popover: avisa quando abre ou fecha. |
| modal | boolean | false | Popover: prende o foco e bloqueia o resto da página. |
| side | "top" | "right" | "bottom" | "left" | "bottom" | PopoverContent: lado preferido. Inverte sozinho se faltar espaço. |
| align | "start" | "center" | "end" | "center" | PopoverContent: alinhamento em relação ao gatilho. |
| sideOffset | number | 4 | PopoverContent: distância do gatilho em px. |
| className | string | — | PopoverContent: largura padrão w-72 e respiro p-4; troque aqui. |
<Popover>
<PopoverTrigger asChild>
<Button color="secondary">Prazo do envelope</Button>
</PopoverTrigger>
<PopoverContent align="start" aria-label="Prazo do envelope">
Expira em 31/10/2026
</PopoverContent>
</Popover>