Popover

Usage

import {
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@zynactra/ui/popover"

<Popover>
  <PopoverTrigger render={<Button variant="outline" />}>Open</PopoverTrigger>
  <PopoverContent>
    <PopoverHeader>
      <PopoverTitle>Rate limits</PopoverTitle>
      <PopoverDescription>Applied to every key.</PopoverDescription>
    </PopoverHeader>
  </PopoverContent>
</Popover>

Position it with side (top, right, bottom, left) and align (start, center, end) on PopoverContent.

Examples

Filters

Edits go to a draft that Apply commits and closes; closing without Apply throws the draft away. Control open to close on Apply, and show the number of active filters on the trigger.

Guidelines

• Keep it to a few controls. If it needs a submit button and validation, use a Dialog or Sheet.
• Changes inside a popover should apply as they're made, or on close. Use an Apply button only when each change would be slow to apply, like re-running a filtered query.
• For read-only previews on hover, use Hover Card; for a short hint, Tooltip.

API reference

Behaviour and props come from Base UI. See the Base UI Popover docs.