Popover

Popover is a component that displays a popup content when the user clicks on an element

default

import { Popover, PopoverClose } from '@/components/ui/Popover';
import Button from '@/components/ui/Button';
import Divider from '@/components/ui/Divider';

export default function Page() {
  return (
    <Popover side="top" align="start" trigger={<Button colors="danger">Delete</Button>}>
      <p className="font-semibold">Alert</p>
      <p className="text-sm">Make sure to Delete this item?</p>
      <Divider className="mt-2 mb-3" />
      <div className="flex justify-end gap-2">
        <PopoverClose>
          <Button size="sm" variant="light" colors="neutral">
            Later
          </Button>
        </PopoverClose>
        <PopoverClose>
          <Button size="sm">Confirm</Button>
        </PopoverClose>
      </div>
    </Popover>
  )
}

placement

use side and align props to change the position of the popover

import { Popover } from '@/components/ui/Popover';

export default function Page() {
  return (
    <Popover side="right" align="end" trigger={<Button>Click Me</Button>}>popover content</Popover>
  )
}

offset

use sideOffset and alignOffset props to change the offset of the popover

hidden arrow

use sideOffset and alignOffset props to change the offset of the popover