Popover

Usage

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

Open Popover

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.

Open Popover

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.

Open Popover

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"	"dark"
variant	"simple""complex"	"simple"

PopoverTitle

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