Popover

A popover is an overlay container that appears when triggered, typically distinguished by its drop shadow and the way it hovers above the interface.

Basic

Source Code

import {
  Button,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

export function Basic() {
  return (
    <Popover id="basic">
      <PopoverTrigger asChild>

Controlled open state

  • You can control Popover state with open and onOpenChange props:

Source Code

const [open, setOpen] = React.useState(false);

return (

<Popover open={open}>
  <PopoverTrigger>
    <Button onClick={() => setOpen((o) => !o)}>Toggle popover</Button>
  </PopoverTrigger>
  <PopoverContent>
    This is controlled popover, it is opened when button is clicked
  </PopoverContent>
</Popover>
  • Controlled example with Toggle:

Source Code

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
  Toggle,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

export function ControlledOpen() {
  const [open, setOpen] = React.useState(false);

  return (

Focus trap

Source Code

import {
  Button,
  Input,
  ListItemText,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Select,
  SelectOption,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

Inline elements

Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this Pokémon was hunted close to extinction by those who were after the priceless antlers. , you may catch sight of it having an intense fight with Murkrow over shiny objects.Ho-Oh’s feathers glow in seven colors depending on the angle at which they are struck by light. These feathers are said to bring happiness to the bearers. This Pokémon is said to live at the foot of a rainbow.

Source Code

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
  Text,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

export function Inline() {
  return (
    <Text>
      Stantler’s magnificent antlers were traded at high prices as works of art. As a result, this

Caret - PopoverContent arrow

  • Set caret prop to add an arrow to the PopoverContent

Source Code

import {
  Button,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@ocean-network-express/magenta-ui/react';
import * as React from 'react';

export function Caret() {
  return (
    <Popover caret>
      <PopoverTrigger asChild>

DropdownConfig

The dropdownConfig props allow you to set the CSS of the dropdown list.

Strategy

  • The strategy prop allows you to control the positioning strategy of the popover.
  • The available strategies are absolute and fixed.
  • The default strategy is absolute.
  • View more details: Fixed position scrolling example.

Source Code

return (
  <Popover dropdownConfig={{ strategy: 'fixed' }} {...otherProps}>
    <PopoverTrigger asChild>
      <Button>Toggle popover</Button>
    </PopoverTrigger>
    <PopoverContent>
      This is an example dropdown of popover fixed when scrolling
    </PopoverContent>
  </Popover>
);

Placement

  • If you want to place the popover anywhere relative to the button, use the dropdownConfig.placement prop.
  • The available base directions are top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, left-end.
  • Each of these base placements has an alignment in the form [direction]-start and [direction]-end. For example, right-start, or bottom-end.
  • The default placement is bottom.

Source Code

import {
  Button,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from '@ocean-network-express/magenta-ui/react';

const CustomPopoverContent: React.FC<{ content: string }> = ({ content }) => {
  return (
    <>
      <PopoverTrigger asChild>
        <Button fullWidth>{content}</Button>

PopoverTrigger children

  • By default PopoverTrigger renders <button>{children}</button> element.
  • asChild prop allows the user to pass any element as the trigger, instead of default button.

Source Code


{/* ✅ OK - this will render <button>Raw string</button> as a trigger */}
<PopoverTrigger>
Raw string
</PopoverTrigger>

{/* ⚠️ partly OK - this will render <button><Button>Magenta component</Button></button> as a trigger, should using with `asChild` prop */}

<PopoverTrigger>
<Button>Magenta component</Button>
</PopoverTrigger>

Accessibility

Popover follows WAI-ARIA recommendations:

  • PopoverContent element has role="dialog" and aria-labelledby="trigger-id" attributes
  • PopoverTrigger element has aria-haspopup="dialog", aria-expanded, aria-controls="dropdown-id" attributes

Keyboard interactions

Key

Description

Condition

Escape

Closes content

Focus within content

Space/Enter

Opens/closes content

Focus on trigger element

Was this page helpful?