Popover

Displays rich content in a portal, triggered by a button.

Props

Popover

PropTypeDefaultDescription
...Radix propsComponentProps<typeof PopoverPrimitive.Root>-All Radix Popover root props

PopoverContent

PropTypeDefaultDescription
align'start' | 'center' | 'end''center'Content alignment relative to trigger
sideOffsetnumber4Offset in pixels from the trigger
...Radix propsComponentProps<typeof PopoverPrimitive.Content>-All Radix content props

Usage

Dimensions

Set the dimensions for the layer.

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open popover</Button>
  </PopoverTrigger>
  <PopoverContent className="w-80" align="start" onOpenAutoFocus={(e) => {
    e.preventDefault();
  }}>
    <div>
      <div className="space-y-2 mb-2">
        <h4 className="leading-none font-medium">Dimensions</h4>
        <p className="text-muted-foreground text-sm">
          Set the dimensions for the layer.
        </p>
      </div>
      <div className="space-y-2">
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Width</p>
            <InputRoot
              id="width"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Max width</p>
            <InputRoot
              id="maxWidth"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Height</p>
            <InputRoot
              id="height"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
        <FormLayout asChild className="w-2xs" orientation="label-left">
          <label>
            <p className="text-uk-md text-left">Max height</p>
            <InputRoot
              id="maxHeight"
              defaultValue="300px"
            />
          </label>
        </FormLayout>
      </div>
    </div>
  </PopoverContent>
</Popover>

Example

<Popover>
  <PopoverTrigger asChild>
    <Button variant="outline">Open</Button>
  </PopoverTrigger>
  <PopoverContent align="start" sideOffset={8}>Content</PopoverContent>
</Popover>