Popover

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

Usage

To create a popover, import and compose <Popover>, <PopoverTrigger>, and <PopoverContent>.

import { Button } from "stylus-ui/Button";
import { Popover, PopoverContent, PopoverTrigger } from "stylus-ui/Popover";

export default () => (
  <Popover>
    <PopoverTrigger asChild>
      <Button variant="secondary">Open Popover</Button>
    </PopoverTrigger>
    <PopoverContent>
      <p>This is the content of the popover.</p>
    </PopoverContent>
  </Popover>
);

Titles

To display a title, pass a title prop into <PopoverTitle>. You can also pass a FontAwesome icon and iconProps to display an icon.

import { Button } from "stylus-ui/Button";
import {
  Popover,
  PopoverContent,
  PopoverTitle,
  PopoverTrigger,
} from "stylus-ui/Popover";
import { faInfoCircle } from "@fortawesome/pro-regular-svg-icons";

export default () => (
  <Popover>
    <PopoverTrigger asChild>
      <Button variant="secondary">Open Popover</Button>
    </PopoverTrigger>
    <PopoverContent>
      <PopoverTitle title="Popover with icon" icon={faInfoCircle} />
      <p>This popover has a title with an icon.</p>
    </PopoverContent>
  </Popover>
);

Positioning

Positioning of the popover can be modified with side, sideOffset, align, and alignOffset props.

import { Button } from "stylus-ui/Button";
import { Popover, PopoverContent, PopoverTrigger } from "stylus-ui/Popover";

export default () => (
  <Popover>
    <PopoverTrigger asChild>
      <Button variant="secondary">Open Popover</Button>
    </PopoverTrigger>
    <PopoverContent side="top" sideOffset={10} align="start">
      <p>This popover is positioned on top and aligned to the start.</p>
    </PopoverContent>
  </Popover>
);

API Reference

`Popover`

Wraps <PopoverTrigger> and <PopoverContent>.

Prop	Type	Default
`defaultOpen`	`boolean`
`modal`	`boolean`	`false`
`onOpenChange`	`(open: boolean) => void`
`open`	`boolean`

`PopoverAnchor`

An optional element to position the <PopoverContent> against. If this part is not used, the content will position alongside the <PopoverTrigger>.

Prop	Type	Default
`asChild`	`boolean`	`false`

`PopoverTrigger`

Inherits properties from HTMLButtonElement.

Prop	Type	Default
`asChild`	`boolean`	`false`

`PopoverContent`

Inherits properties from Radix HTMLElement.

Prop	Type	Default
`align`	`"start""center""end"`	`"center"`
`asChild`	`boolean`	`false`
`className`	`string`
`side`	`"top""right""bottom""left"`	`"bottom"`
`sideOffset`	`number`	`14`
`theme`	`"light""dark"`	`"light"`

`PopoverTitle`

Prop	Type	Default
`title`	`string`
`icon`	`IconDefinition`
`iconProps`	`Omit<FontAwesomeIconProps, 'icon'>`