Overlay

Default

Overlays optionally accept a color, which sets the "start" (opaque) color of a gradient mask. Because this overlay is intended to reveal underlying content, the "end" color is fixed to transparent.

The optional layout prop accepts the position and size of the overlay as a key:value pair.

The position key accepts bottom (default), top, y (for both top and bottom) right, left, or x (for both left and right), which sets the side(s) where the color overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of bottom starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.

The size value is full (100%) by default, but accepts our spacing tokens or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

import React from 'react'
import {
    Overlay,
    Table,
} from 'playbook-ui'

const TableExample = () => {
    return (
        <Table size="sm">
            <thead>
                <tr>
                    <th>{'Column 1'}</th>
                    <th>{'Column 2'}</th>
                    <th>{'Column 3'}</th>
                    <th>{'Column 4'}</th>
                    <th>{'Column 5'}</th>
                </tr>
            </thead>
            <tbody>
                {Array.from({ length: 7 }, (_, index) => (
                    <tr key={index}>
                        {Array.from({ length: 5 }, (_, columnIndex) => (
                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
                        ))}
                    </tr>
                ))}
            </tbody>
        </Table>
    )
}

const OverlayDefault = () => (
    <>
        <Overlay>
            <TableExample />
        </Overlay>
    </>
)

export default OverlayDefault

Multi-directional

Optionally, you can pass multi-directional options (x or y) to the position key, which creates multiple overlays.

Your color is still applied as the starting edge to both overlays, and each mask will fade to transparent moving toward its opposite edge, ending at the size value you set.

NOTE: Multi-directional overlays share the available container space, so passing full or a percentage string greater than 50% to a multi-directional overlay will cause your masks to overlap at the midline of your container. As a best practice, we do not recommend exceeding a percentage size of 25% when using multi-directional overlays.

import React from 'react'
import {
    Overlay,
    Card,
    Flex,
    FlexItem,
} from 'playbook-ui'

const InlineCardsExample = () => {
    return (
        <Flex
            columnGap="lg"
            orientation="row"
            overflowX="auto"
        >
            {Array.from({ length: 15 }, (_, index) => (
                <FlexItem key={index}>
                    <Card>{"Card Content"}</Card>
                </FlexItem>
            ))}
        </Flex>
    )
}

const OverlayMultiDirectional = () => (
    <>
        <Overlay
            color="card_light"
            layout={{"x": "xl"}}
        >
            <InlineCardsExample />
        </Overlay>
    </>
)

export default OverlayMultiDirectional

Toggle

To toggle an overlay, add a button with an event handler. Remove the overlay container to reveal the underlying content. Re-wrap the overlay container to add the overlay back.

/* eslint-disable react/no-multi-comp */
import React, { useState } from "react";
import { Overlay, Table, Button } from "playbook-ui";

const TableExample = () => {
    return (
        <Table size="sm">
            <thead>
                <tr>
                    <th>{"Column 1"}</th>
                    <th>{"Column 2"}</th>
                    <th>{"Column 3"}</th>
                    <th>{"Column 4"}</th>
                    <th>{"Column 5"}</th>
                </tr>
            </thead>
            <tbody>
                {Array.from({ length: 7 }, (_, index) => (
                    <tr key={index}>
                        {Array.from({ length: 5 }, (_, columnIndex) => (
                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
                        ))}
                    </tr>
                ))}
            </tbody>
        </Table>
    );
};

const OverlayToggle = () => {
    const [showOverlay, setShowOverlay] = useState(true);

    return (
        <>
            {showOverlay ? (
                <>
                    <Overlay overflow="hidden">
                        <div style={{ height: 200 }}>
                            <TableExample />
                        </div>
                    </Overlay>
                    <Button
                        fullWidth
                        icon="chevron-down"
                        iconRight
                        key="chevron-down"
                        onClick={() => setShowOverlay(false)}
                        text="Show More"
                        variant="link"
                    />
                </>
            ) : (
                <>
                    <TableExample />
                    <Button
                        fullWidth
                        icon="chevron-up"
                        iconRight
                        key="chevron-up"
                        onClick={() => setShowOverlay(true)}
                        text="Show Less"
                        variant="link"
                    />
                </>
            )}
        </>
    );
};

export default OverlayToggle;

Available Props

Contribute to Playbook

When you start designing a new feature, you may come across a Design Token or Component that isn’t defined in Playbook. If so, you should open an issue or reach out to the team to make a contribution.

Contribute on GitHub

As the highest-rated residential remodeler in the nation, our international technology team builds a custom suite of products that continuously transform our business.

Power

Tech @ Power

Open Positions

About Power

Connect

Dribbble

Github

Connect Chat