Takeover

The Takeover component is a full-screen overlay that behaves as a modal. It is often used to create step-by-step user flows.

Once open it traps focus within the dialog and prevents the user from interacting with the rest of the page until the dialog is closed.

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(''); return ( <div> {['dark', 'light'].map((variant) => ( <Button onClick={() => setShow(variant)} variant={variant} className="me-2 mb-2"> Show {variant} Takeover </Button> ))} <Takeover aria-labelledby="takeover-label" onClickClose={() => setShow(false)} show={!!show} variant={show} > <Takeover.Header> <Takeover.Header.Content renderTitle={() => <div id="takeover-label">Takeover Title</div>} renderSubtitle={() => 'Subtitle'} renderLogo={() => <span className="icon-placeholder"></span>} /> </Takeover.Header> <Takeover.Body> <Takeover.BodyHeader> <span>Item 1</span> <span className="icon-arrow-right mx-4"></span> <span>Item 2</span> <span className="icon-arrow-right mx-4"></span> <span>Item 3</span> </Takeover.BodyHeader> <Takeover.BodyScroll>Scrollable content</Takeover.BodyScroll> <Takeover.BodyFooter> <div className="d-flex justify-content-between"> <Button variant="outline-secondary">Back</Button> <Button variant="primary">Next</Button> </div> </Takeover.BodyFooter> </Takeover.Body> </Takeover> </div> ); }

function Example() {
    const [show, setShow] = React.useState('');

    return (
        <div>
            {['dark', 'light'].map((variant) => (
                <Button onClick={() => setShow(variant)} variant={variant} className="me-2 mb-2">
                    Show {variant} Takeover
                </Button>
            ))}

            <Takeover
                aria-labelledby="takeover-label"
                onClickClose={() => setShow(false)}
                show={!!show}
                variant={show}
            >
                <Takeover.Header>
                    <Takeover.Header.Content
                        renderTitle={() => <div id="takeover-label">Takeover Title</div>}
                        renderSubtitle={() => 'Subtitle'}
                        renderLogo={() => <span className="icon-placeholder"></span>}
                    />
                </Takeover.Header>

                <Takeover.Body>
                    <Takeover.BodyHeader>
                        <span>Item 1</span>
                        <span className="icon-arrow-right mx-4"></span>
                        <span>Item 2</span>
                        <span className="icon-arrow-right mx-4"></span>
                        <span>Item 3</span>
                    </Takeover.BodyHeader>

                    <Takeover.BodyScroll>Scrollable content</Takeover.BodyScroll>

                    <Takeover.BodyFooter>
                        <div className="d-flex justify-content-between">
                            <Button variant="outline-secondary">Back</Button>
                            <Button variant="primary">Next</Button>
                        </div>
                    </Takeover.BodyFooter>
                </Takeover.Body>
            </Takeover>
        </div>
    );
}

Props

Takeover

TakeoverHeader

TakeoverHeaderContent

The TakeoverHeaderContent component is a helper component that renders specific header content, prestyled, into the TakeoverHeader.

TakeoverBody

TakeoverBodyHeader

TakeoverBodyScroll

The TakeoverBodyScroll component is a helper component that renders a scrollable area within the TakeoverBody. It is usually placed between the TakeoverBodyHeader and TakeoverBodyFooter but can be used by itself or within multicolumn layouts.

TakeoverBodyFooter