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 data-testid="pw-takeover">
			{['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 data-testid="pw-takeover-customheader">
			<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