# Drawers

Use Superwall's drawer component to display content presented in response to a button tap or a variable changing.

Adding a drawer component [#adding-a-drawer-component]

The drawer component was built to make displaying contents from a bottom drawer easy, right out of the box. To use the drawer component:

1. In the left sidebar, click **+** to add a new element.
2. Choose **Drawer** under the "Base Elements" header.

<img src="__img0" />

Drawers will automatically show a dimming view behind them when presented. Tapping on it will dismiss the drawer. By default, they are interactive — meaning they can be dismissed via a drag gesture. You can also change this to be `manual`, letting you explicity control when it presents or dismisses. Toggle this under the `Dismissable` property:

<img src="__img1" />

Presenting drawers [#presenting-drawers]

When a drawer element is added, Superwall automatically creates an element variable for it (accessed through the &#x2A;*[Variables](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-variables)*&#x2A; tab in the left sidebar, or the variables button in the &#x2A;*[floating toolbar](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-floating-toolbar)**). Its name will match whatever is in the element hierarchy in the left sidebar:

<img src="__img2" />

To toggle its open state, you can use a tap behavior on a button or another element. In this example, we add a [tap behavior](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-styling-elements#tap-behaviors) to the button, which toggles the element variable's `Is Open` value:

<img src="__img3" />

You can also bind a drawer's open state to another paywall variable. For example, use `state.didAbandonTransaction` to open a recovery offer drawer after the user cancels the App Store or Google Play purchase sheet. See [Abandoned Transaction Paywalls](/docs/dashboard/guides/tips-abandoned-transaction-paywall) for the full setup.

> **Note**

The variable's name is derived by the node's unique identifier. You don't need to set or generally be aware of this value.



Adding content to drawers [#adding-content-to-drawers]

By default, drawers have a minimum height set. This is a general size that works well, but in most cases you'll want to add a [stack](/docs/dashboard/dashboard-creating-paywalls/paywall-editor-stacks) and have the drawer derive its height from that. Or, you can add a stack and set its height equal to the drawer's minimum height. Generally, that approach is not as flexible since you likely want the drawer's height to be determined by the content inside of it:

## Tab

By default, there is a minimum height on the drawer. Here, we've removed that so that the inner stack will control its height:<img src="__img4" />

## Tab

Since the drawer's minimum height was cleared, now it'll derive its height from the stack inside of it:<img src="__img5" />