Overlay
Overlay components codify design patterns related to floating surfaces such as dialogs and menus.
On this page
- @primer/react@37.2.0
- Alpha
- Not reviewed for accessibility
On this page
Import
import {Overlay} from '@primer/react'
Examples
Props
Overlay
Name | Default | Description |
---|---|---|
returnFocusRefRequired | React.RefObject<HTMLElement> Ref for the element to focus when the | |
onClickOutsideRequired | function Function to call when clicking outside of the | |
onEscapeRequired | function Function to call when user presses | |
ignoreClickRefs | React.RefObject<HTMLElement> [] An array of ref objects to ignore clicks on in the onOutsideClick behavior. This is often used to ignore clicking on the element that toggles the open/closed state for the Overlay to prevent the Overlay from being toggled twice. | |
initialFocusRef | React.RefObject<HTMLElement> Ref for the element to focus when the | |
width | 'auto' | | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'auto' Sets the width of the |
height | 'auto' | | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'auto' Sets the height of the |
maxHeight | | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' Sets the maximum height of the | |
maxWidth | | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' Sets the maximum width of the | |
visibility | 'visible' | | 'visible' | 'hidden' Sets the visibility of the |
anchorSide | | 'inside-top' | 'inside-bottom' | 'inside-left' | 'inside-right' | 'inside-center' | 'outside-top' | 'outside-bottom' | 'outside-left' | 'outside-right' If provided, the Overlay will slide into position from the side of the anchor with a brief animation | |
top | 0 | number The top CSS property of the Overlay — affects the vertical position. |
left | 0 | number The left CSS property of the Overlay — affects the horizontal position. |
right | number The right CSS property of the Overlay — affects the horizontal position. | |
bottom | number The bottom CSS property of the Overlay — affects the vertical position. | |
position | absolute | | 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' The position CSS property of the Overlay — sets how the Overlay is positioned relative to its Portal |
portalContainerName | string If defined, Overlays will be rendered in the named portal. See also | |
preventOverflow | true | boolean Determines if the Overlay width should be adjusted responsively if |
sx | SystemStyleObject |