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

Custom buttons/actions within the header

Result

Loading...

Live Editor

function Example() { const [show, setShow] = React.useState(false); return ( <div> <Button onClick={() => setShow(true)} className="me-2 mb-2"> Show Takeover </Button> <Takeover aria-labelledby="takeover-label" onClickClose={() => setShow(false)} show={!!show}> <Takeover.Header className="flex-wrap" renderCloseButton={(onClickClose) => ( <div className="d-flex align-items-center flex-fill justify-content-end"> <div> <Button variant="link" size="sm" className="ms-2 text-white"> Help </Button> </div> <div> <Button variant="link" size="sm" className="ms-2 me-2 text-white"> Settings </Button> </div> <div> <Button onClick={onClickClose} size="sm" variant="outline-secondary"> Dismiss and Return </Button> </div> </div> )} > <Takeover.Header.Content renderTitle={() => <div id="takeover-label">Takeover Title</div>} renderSubtitle={() => ( <div className="d-flex align-items-center flex-wrap"> <div>Subtitle</div> <div> <Button variant="link" size="sm" className="ms-2 text-white"> Link </Button> </div> <div> <Button variant="link" size="sm" className="ms-2 text-white"> Link </Button> </div> <div> <Button variant="link" size="sm" className="ms-2 text-white"> Link </Button> </div> </div> )} 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(false);

    return (
        <div>
            <Button onClick={() => setShow(true)} className="me-2 mb-2">
                Show Takeover
            </Button>

            <Takeover aria-labelledby="takeover-label" onClickClose={() => setShow(false)} show={!!show}>
                <Takeover.Header
                    className="flex-wrap"
                    renderCloseButton={(onClickClose) => (
                        <div className="d-flex align-items-center flex-fill justify-content-end">
                            <div>
                                <Button variant="link" size="sm" className="ms-2 text-white">
                                    Help
                                </Button>
                            </div>
                            <div>
                                <Button variant="link" size="sm" className="ms-2 me-2 text-white">
                                    Settings
                                </Button>
                            </div>
                            <div>
                                <Button onClick={onClickClose} size="sm" variant="outline-secondary">
                                    Dismiss and Return
                                </Button>
                            </div>
                        </div>
                    )}
                >
                    <Takeover.Header.Content
                        renderTitle={() => <div id="takeover-label">Takeover Title</div>}
                        renderSubtitle={() => (
                            <div className="d-flex align-items-center flex-wrap">
                                <div>Subtitle</div>
                                <div>
                                    <Button variant="link" size="sm" className="ms-2 text-white">
                                        Link
                                    </Button>
                                </div>
                                <div>
                                    <Button variant="link" size="sm" className="ms-2 text-white">
                                        Link
                                    </Button>
                                </div>
                                <div>
                                    <Button variant="link" size="sm" className="ms-2 text-white">
                                        Link
                                    </Button>
                                </div>
                            </div>
                        )}
                        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