Backdrop

A backdrop is used to focus a user on a particular sub task of a page. They block the ability to interact with other page elements while active. Backdrops always accompany a dialog, modal or module.

Content should never be directly placed on the backdrop.

Backdrop color and opacity will not change. There are no custom sizes for Backdrops. They will always span the full width and height of the view.

Figma

Basic Usage

 <Button @click="isVisible = true">Show Backdrop</Button>
  <div
    class="tw-relative tw-transition-opacity"
    :class="{
      'tw-z-behind tw-opacity-0 tw-invisible': !isVisible,
      'tw-z-modal tw-opacity-100 tw-visible': isVisible,
    }"
  >
    <Backdrop @click="isVisible = false" />
  </div>

Anatomy

1. Container