This feature is still experimental. “Experimental” means this is an early implementation subject to drastic and breaking changes.

Flyout is a component to render a floating content modal. It is similar in purpose to a tooltip, but renders content of any sort, not only simple text.


import { Button, __experimentalFlyout as Flyout, __experimentalText as Text } from '@wordpress/components';

function Example() {
    return (
        <Flyout trigger={ <Button>Show/Hide content</Button> }>
            <Text>Code is Poetry</Text>


state: PopoverStateReturn

  • Required: No

label: string

  • Required: No

animated: boolean

Determines if Flyout has animations.

  • Required: No
  • Default: true

animationDuration: boolean

The duration of Flyout animations.

  • Required: No
  • Default: 160

baseId: string

ID that will serve as a base for all the items IDs. See

  • Required: No
  • Default: 160

elevation: number

Size of the elevation shadow. For more information, check out Card.

  • Required: No
  • Default: 5

maxWidth: CSSProperties[ ‘maxWidth’ ]

Max-width for the Flyout element.

  • Required: No
  • Default: 360

onVisibleChange: ( …args: any ) => void

Callback for when the visible state changes.

  • Required: No

trigger: FunctionComponentElement< any >

Element that triggers the visible state of Flyout when clicked.

<Flyout trigger={<Button>Greet</Button>}>
    <Text>Hi! I'm Olaf!</Text>
  • Required: Yes

visible: boolean

Whether Flyout is visible. See the Reakit docs for more information.

  • Required: No
  • Default: false

placement: PopperPlacement

Position of the popover element. See the popper docs for more information.

  • Required: No
  • Default: auto