Flyout Edit

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

• Required: No

• Required: No

Determines if Flyout has animations.

• Required: No
• Default: true

The duration of Flyout animations.

• Required: No
• Default: 160

ID that will serve as a base for all the items IDs. See https://reakit.io/docs/popover/#usepopoverstate

• Required: No
• Default: 160

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

• Required: No
• Default: 5

Max-width for the Flyout element.

• Required: No
• Default: 360

Callback for when the visible state changes.

• Required: No

Element that triggers the visible state of Flyout when clicked.

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

• Required: Yes

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

• Required: No
• Default: false

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

• Required: No
• Default: auto