Popover

A floating panel next to its trigger; HoverCard previews on hover, never as the only way in.

<Popover trapFocus>
      <Popover.Trigger>
        <Button>Rename</Button>
      </Popover.Trigger>
      <Popover.Content title="Rename key" className="w-320">
        <div className="flex flex-col gap-12">
          <Input aria-label="Name" defaultValue="checkout-web" />
          <div className="flex justify-end gap-8">
            <Popover.Close>
              <Button size="sm">Cancel</Button>
            </Popover.Close>
            <Button size="sm" variant="primary">
              Save
            </Button>
          </div>
        </div>
      </Popover.Content>
    </Popover>

import { Popover, HoverCard } from "@logicplanes/kaeso-ui";

Props

children
ReactNode
The trigger and the panel's content.
defaultOpen
boolean
Whether it starts open, when the component keeps its own state.
onOpenChange
((open: boolean) => void)
Called when it opens or closes.
open
boolean
Whether it is open, when you control it.
trapFocus
boolean
Trap focus only when the popover holds a form.