AnchoredOverlay

AnchoredOverlay opens an Overlay relative to the anchor position.

Page navigation navigation

AnchoredOverlay provides an anchor that will open a floating Overlay positioned relative to the anchor. The Overlay can be opened and navigated using a keyboard or mouse.

React examples

Default

import React from 'react'
import {AnchoredOverlay, Button} from '@primer/react'


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


  return (
    <AnchoredOverlay
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      renderAnchor={props => <Button {...props}>Toggle overlay</Button>}
    >
      <div>Anchored overlay content</div>
    </AnchoredOverlay>
  )
}

import React from 'react'
import {AnchoredOverlay, Button} from '@primer/react'

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

  return (
    <AnchoredOverlay
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      renderAnchor={props => <Button {...props}>Toggle overlay</Button>}
    >
      <div>Anchored overlay content</div>
    </AnchoredOverlay>
  )
}

Width and height customization

You can pick from a set of predefined widths and heights.

import React from 'react'
import {AnchoredOverlay, Button} from '@primer/react'


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


  return (
    <AnchoredOverlay
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      renderAnchor={props => <Button {...props}>Toggle overlay</Button>}
      width="small"
      height="xsmall"
    >
      <div>Anchored overlay content</div>
    </AnchoredOverlay>
  )
}

import React from 'react'
import {AnchoredOverlay, Button} from '@primer/react'

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

  return (
    <AnchoredOverlay
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      renderAnchor={props => <Button {...props}>Toggle overlay</Button>}
      width="small"
      height="xsmall"
    >
      <div>Anchored overlay content</div>
    </AnchoredOverlay>
  )
}

Custom positioning

The side, align, anchorOffset, and alignmentOffset props can be used to customize how the AnchoredOverlay is positioned relative to the "anchor" that toggles it.

import React from 'react'
import {AnchoredOverlay, Button} from '@primer/react'


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


  return (
    <AnchoredOverlay
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      renderAnchor={props => <Button {...props}>Toggle overlay</Button>}
      side="outside-right"
      align="end"
      anchorOffset={20}
      alignmentOffset={4}
    >
      <div>Anchored overlay content</div>
    </AnchoredOverlay>
  )
}

import React from 'react'
import {AnchoredOverlay, Button} from '@primer/react'

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

  return (
    <AnchoredOverlay
      open={open}
      onOpen={() => setOpen(true)}
      onClose={() => setOpen(false)}
      renderAnchor={props => <Button {...props}>Toggle overlay</Button>}
      side="outside-right"
      align="end"
      anchorOffset={20}
      alignmentOffset={4}
    >
      <div>Anchored overlay content</div>
    </AnchoredOverlay>
  )
}

More code examples

See the AnchoredOverlay Storybook stories.

Props

Loading data for anchored_overlay...

Overlay