Popover

Popover opens a floating panel next to a trigger. Use it for short forms and extra controls. For a hover hint, use Tooltip, and for a list of actions, use DropdownMenu.

'use client';

import { Button } from '@/components/nxds/components/button/button';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/nxds/components/popover/popover';

export default function PopoverDefault() {
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Open popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <p className="nx:typography-body-default nx:text-muted-foreground">
          Place content for the popover here.
        </p>
      </PopoverContent>
    </Popover>
  );
}

This example also needs: Button.

Installation

npx nxds-cli@latest add popover

Run npx nxds-cli@latest init first if nxds isn’t set up in your app yet. See Install.

Usage

import {
  Popover,
  PopoverAnchor,
  PopoverContent,
  PopoverTrigger,
} from '@/components/nxds/components/popover/popover';

Composition

Popover
├── PopoverTrigger
├── PopoverContent
└── PopoverAnchor

Examples

With form

Put a small form with labelled inputs inside the popover.

'use client';

import * as React from 'react';

import { Button } from '@/components/nxds/components/button/button';
import { Input } from '@/components/nxds/components/input/input';
import { Label } from '@/components/nxds/components/label/label';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/nxds/components/popover/popover';

export default function PopoverWithForm() {
  const widthId = React.useId();
  const maxWidthId = React.useId();
  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button variant="outline">Set dimensions</Button>
      </PopoverTrigger>
      <PopoverContent className="nx:w-80">
        <div className="nx:flex nx:flex-col nx:gap-4">
          <div className="nx:flex nx:flex-col nx:gap-1.5">
            <h4 className="nx:typography-label-default nx:leading-none">
              Dimensions
            </h4>
            <p className="nx:typography-body-default nx:text-muted-foreground">
              Set the dimensions for the layer.
            </p>
          </div>
          <div className="nx:flex nx:flex-col nx:gap-2">
            <div className="nx:grid nx:grid-cols-3 nx:items-center nx:gap-4">
              <Label htmlFor={widthId}>Width</Label>
              <Input
                id={widthId}
                defaultValue="100%"
                className="nx:col-span-2"
              />
            </div>
            <div className="nx:grid nx:grid-cols-3 nx:items-center nx:gap-4">
              <Label htmlFor={maxWidthId}>Max. width</Label>
              <Input
                id={maxWidthId}
                defaultValue="300px"
                className="nx:col-span-2"
              />
            </div>
          </div>
        </div>
      </PopoverContent>
    </Popover>
  );
}

This example also needs: Input, Label.

Placements

Set side and align on PopoverContent to place it around the trigger.

'use client';

import { Button } from '@/components/nxds/components/button/button';
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@/components/nxds/components/popover/popover';

export default function PopoverPlacements() {
  return (
    <div className="nx:flex nx:flex-wrap nx:gap-4">
      {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
        <Popover key={side}>
          <PopoverTrigger asChild>
            <Button variant="outline">side: {side}</Button>
          </PopoverTrigger>
          <PopoverContent side={side}>
            <p className="nx:typography-body-default">Opens on {side}.</p>
          </PopoverContent>
        </Popover>
      ))}
      {(['start', 'center', 'end'] as const).map((align) => (
        <Popover key={align}>
          <PopoverTrigger asChild>
            <Button variant="outline">align: {align}</Button>
          </PopoverTrigger>
          <PopoverContent align={align}>
            <p className="nx:typography-body-default">Aligned {align}.</p>
          </PopoverContent>
        </Popover>
      ))}
    </div>
  );
}

With anchor

Wrap another element in PopoverAnchor to position the popover against it instead of the trigger.

The popover positions against this anchor box.

'use client';

import { Button } from '@/components/nxds/components/button/button';
import {
  Popover,
  PopoverAnchor,
  PopoverContent,
  PopoverTrigger,
} from '@/components/nxds/components/popover/popover';

export default function PopoverWithAnchor() {
  return (
    <Popover>
      <PopoverAnchor asChild>
        <div className="nx:rounded-md nx:border-default nx:border-border-default nx:bg-muted nx:p-container nx:typography-label-default nx:text-muted-foreground">
          The popover positions against this anchor box.
        </div>
      </PopoverAnchor>
      <div className="nx:mt-4">
        <PopoverTrigger asChild>
          <Button variant="outline">Toggle popover</Button>
        </PopoverTrigger>
      </div>
      <PopoverContent>
        <p className="nx:typography-body-default">
          Positioned relative to the anchor box, not the trigger button.
        </p>
      </PopoverContent>
    </Popover>
  );
}

Props

Popover adds no props of its own; it accepts the props of the element or primitive it wraps.

PopoverAnchor

PopoverAnchor adds no props of its own; it accepts the props of the element or primitive it wraps.

PopoverContent adds no props of its own; it accepts the props of the element or primitive it wraps.

PopoverTrigger

PopoverTrigger adds no props of its own; it accepts the props of the element or primitive it wraps.