Flyout

---

• Usage
• Props
• state: PopoverStateReturn
• label: string
• animated: boolean
• animationDuration: boolean
• baseId: string
• elevation: number
• maxWidth: CSSProperties[ 'maxWidth' ]
• onVisibleChange: ( ...args: any ) => void
• trigger: FunctionComponentElement< any >
• visible: boolean
• placement: PopperPlacement

---

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.

Usage

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>
        </Flyout>
    );
}

Props

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 https://reakit.io/docs/popover/#usepopoverstate

• 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>
</Flyout>

• 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