Dialogs
Popover

Popover dialog

Add dialog functionality to your component.

View sourceARIA Authoring

Anatomy

import { Popover, Button, Menu } from "@lualtek/react-components";
 
export default () => {
  return (
    <Popover>
      <Popover.Trigger>
        <Button>Open popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        <Menu>
          <Menu.Item>Item option 1</Menu.Item>
          <Menu.Item>Item option 2</Menu.Item>
          <Menu.Item>Item option 3</Menu.Item>
        </Menu>
      </Popover.Content>
    </Popover>
  );
};

Controlled popover

The Popover component can be controlled from the outside by using the open property. If set to true, the popover will be open once rendered, while passing false when it's open, it will force close.

import { Popover, Button } from "@lualtek/react-components";
 
export default () => {
  const [open, setOpen] = useState(false);
 
  return (
    <Popover open={open} onOpenChange={(state) => setOpen(state)}>
      <Popover.Trigger>
        <Button onClick={() => setOpen((state) => !state)}>Open popover</Button>
      </Popover.Trigger>
      <Popover.Content>
        ....
        <Button onClick={() => setOpen(false)}>Close</Button>
      </Popover.Content>
    </Popover>
  );
};

API Reference

Popover

This component extends the radix-ui Popover.Root (opens in a new tab) component, which exposes different props that enables multiple functionalities

Popover.Trigger

This component extends the radix-ui Popover.Trigger (opens in a new tab) component, which exposes different props that enables multiple functionalities

Popover.Content

This component extends the radix-ui Popover.Content (opens in a new tab) component, which exposes different props that enables multiple functionalities, and adds the following:

export type PopoverContentProps = {
  /**
   * Whether to show the arrow pointing to the anchor element.
   * @default false
   */
  showArrow?: boolean;
 
  /**
   * The color of the arrow
   * @defualt 'var(--dimmed-2)'
   */
  arrowColor?: string;
 
  /**
   * The side of the anchor element from which the popover will appear.
   */
  side?: PopoverContentProps["side"];
 
  /**
   * The offset from the anchor element.
   * @default 4
   */
  offset?: TokensTypes["space"];
 
  /**
   * Whether to use a portal to render the popover.
   * @default true
   */
  usePortal?: boolean;
};

Popover.Close

This component extends the radix-ui Popover.Close (opens in a new tab) component, which exposes different props that enables multiple functionalities

ModalToast