Popover

An anchored overlay for inline editing. Built on Radix Popover.

Import

import { Popover, PopoverTrigger, PopoverContent } from '@aspect/react';

Usage

<Popover>
  <PopoverTrigger asChild>
    <Button variant="secondary">Edit</Button>
  </PopoverTrigger>
  <PopoverContent showArrow>
    <Input label="Name" defaultValue="frosty-mountain" />
    <Button size="sm" variant="primary">
      Save
    </Button>
  </PopoverContent>
</Popover>

Props (PopoverContent)

| Prop | Type | Default | Description | | ------------ | ---------------------------------------- | ---------- | --------------------- | | showArrow | boolean | false | Connecting arrow | | side | 'top' \| 'right' \| 'bottom' \| 'left' | 'bottom' | Placement | | sideOffset | number | 6 | Distance from trigger |