Drawer

A drawer without a backdrop allows a user to continue to interact with the rest of the page. This can be useful when you wants users to have the ability to interact with the page and the drawer at the same time.

<State initial={true}>
    {([open, setOpen]) => (
        <div>
            <Button onClick={() => setOpen(true)}>Toggle Drawer</Button>
            <Drawer
                header="Drawer Header"
                open={open}
                onClose={() => setOpen(false)}
                portal={false}
            >
                You can always set up this campaign at a later time.
            </Drawer>
        </div>
    )}
</State>

<State initial={true}>
    {([open, setOpen]) => (
        <div>
            <Button onClick={() => setOpen(true)}>Toggle Drawer</Button>
            <Drawer
                header="Drawer Header"
                open={open}
                onClose={() => setOpen(false)}
                portal={false}
            >
                You can always set up this campaign at a later time.
            </Drawer>
        </div>
    )}
</State>

Over all Content

<State initial={false}>
    {([open, setOpen]) => (
        <div>
            <Button onClick={() => setOpen(true)}>Toggle Drawer</Button>
            <Drawer
                header="Drawer Header"
                open={open}
                onClose={() => setOpen(false)}
            >
                You can always set up this campaign at a later time.
            </Drawer>
        </div>
    )}
</State>

<State initial={false}>
    {([open, setOpen]) => (
        <div>
            <Button onClick={() => setOpen(true)}>Toggle Drawer</Button>
            <Drawer
                header="Drawer Header"
                open={open}
                onClose={() => setOpen(false)}
            >
                You can always set up this campaign at a later time.
            </Drawer>
        </div>
    )}
</State>

Closing a Drawer

Drawers without a backdrop are closed through an explicit control. This is typically through clicking a ×, a Drawer footer button, or a labeled button on the page. Clicking outside the drawer should not close it.

Drawer with a Backdrop

A backdrop restricts user interaction to just the Drawer. This is useful when a task is focused. Drawers with backdrops close similar to the Modal component.

<State initial={false}>
    {([open, setOpen]) => (
        <div>
            <Button onClick={() => setOpen(true)}>Drawer with Backdrop</Button>
            <Drawer
                header="Drawer Header"
                open={open}
                onClose={() => setOpen(false)}
                portal={false}
                backdrop
            >
                You can always set up this campaign at a later time.
            </Drawer>
        </div>
    )}
</State>

<State initial={false}>
    {([open, setOpen]) => (
        <div>
            <Button onClick={() => setOpen(true)}>Drawer with Backdrop</Button>
            <Drawer
                header="Drawer Header"
                open={open}
                onClose={() => setOpen(false)}
                portal={false}
                backdrop
            >
                You can always set up this campaign at a later time.
            </Drawer>
        </div>
    )}
</State>

Non-closable Drawers

When a workflow is mandatory, the close functionalities — clicking the backdrop or × — can be removed. A user would have to complete a task to proceed.

<State initial={false}>
    {([open, setOpen]) => (
        <div>
            <Button onClick={() => setOpen(true)}>Non-closable Drawer</Button>
            <Drawer
                header="Drawer Header"
                open={open}
                portal={false}
                backdrop
                footer={<Button primary onClick={() => setOpen(false)}>I Accept</Button>}
                footerAlign="right"
            >
                You can always set up this campaign at a later time.
            </Drawer>
        </div>
    )}
</State>

<State initial={false}>
    {([open, setOpen]) => (
        <div>
            <Button onClick={() => setOpen(true)}>Non-closable Drawer</Button>
            <Drawer
                header="Drawer Header"
                open={open}
                portal={false}
                backdrop
                footer={<Button primary onClick={() => setOpen(false)}>I Accept</Button>}
                footerAlign="right"
            >
                You can always set up this campaign at a later time.
            </Drawer>
        </div>
    )}
</State>

When to use a backdrop

When a Drawer is being used as an informational display, or supplementary to a page task, a backdrop is usually not needed on a Drawer. When a Drawer is an essential part of a workflow, or involves a lot of data manipulation where data conflicts with the page can occur, a backdrop is preferred.

Drawer Sizes

Drawer sizes mimic the sizes of the Modal. Each size has a built in 90% width value and a maximum width value. If a design needs to occupy 100% of the screen, consider using a Takeover.

<State initial={{open: false, width: 'l'}}>
    {([state, setState]) => {
        const toggleOpen = () => setState(prev => ({...prev, open: !state.open}));
        const widthValue = (width) => setState(prev => ({...prev, width: width}));
        const widths = ["xs", "s", "m", "l"];

        return (
            <div>
                <ButtonGroup>
                    {widths.map((width, index) => (
                        <Button
                            key={index}
                            onClick={() => { widthValue(width); toggleOpen(); }}
                        >
                            <span className="tt-uppercase m-r-half">{width}</span>
                            Drawer
                        </Button>
                    ))}
                </ButtonGroup>
                <Drawer
                    header="Drawer Header"
                    open={state.open}
                    onClose={() => toggleOpen()}
                    portal={false}
                    backdrop
                    width={state.width}
                >
                    You can always set up this campaign at a later time.
                </Drawer>
            </div>
        )
    }}
</State>

<State initial={{open: false, width: 'l'}}>
    {([state, setState]) => {
        const toggleOpen = () => setState(prev => ({...prev, open: !state.open}));
        const widthValue = (width) => setState(prev => ({...prev, width: width}));
        const widths = ["xs", "s", "m", "l"];
        return (
            <div>
                <ButtonGroup>
                    {widths.map((width, index) => (
                        <Button
                            key={index}
                            onClick={() => { widthValue(width); toggleOpen(); }}
                        >
                            <span className="tt-uppercase m-r-half">{width}</span>
                            Drawer
                        </Button>
                    ))}
                </ButtonGroup>
                <Drawer
                    header="Drawer Header"
                    open={state.open}
                    onClose={() => toggleOpen()}
                    portal={false}
                    backdrop
                    width={state.width}
                >
                    You can always set up this campaign at a later time.
                </Drawer>
            </div>
        )
    }}
</State>

Drawer headers typically have a title and a close icon. A header can also be customized to use other Anvil components. Any action element added to the header (such as a Button) should not close the Drawer, and should use a secondary style.