A drawer is a panel that slides onto the page. Drawers come in different sizes, with options for headers, footers, and backdrops. All drawers slide in from the right.
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.
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.
<Stateinitial={false}>
{([open, setOpen])=>(
<div>
<ButtononClick={()=>setOpen(true)}>Drawer with Backdrop</Button>
<Drawer
header="Drawer Header"
open={open}
onClose={()=>setOpen(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.