Backdrop

The scrim Modal and Drawer paint behind their panels, exposed as a standalone primitive, for blocking "please wait" states, image viewers and custom overlays. It is purely presentational and ships zero client JavaScript: render it to show it; mounting, transitions and dismissal belong to the caller.

import { Backdrop, Box, Card, Loader, Text } from "astralis-ui";

// The scrim is position:fixed by design; the demo scopes it to a frame by
// overriding to absolute inside a relative container.
export function BackdropDemo() {
  return (
    <Box position="relative" w="full" maxW="md" overflow="hidden" rounded="lg">
      <Card>
        <Card.Body>
          <Text size="sm">Content that is busy loading sits behind the scrim.</Text>
        </Card.Body>
      </Card>
      <Backdrop style={{ position: "absolute" }}>
        <Loader colorScheme="gray" />
      </Backdrop>
    </Box>
  );
}

import { Backdrop, Loader } from "astralis-ui";

<Backdrop
  style={{ position: "absolute" }}
>
  <Loader colorScheme="gray" />
</Backdrop>

Import#

import { Backdrop } from "astralis-ui";

Scoping the scrim#

The scrim is position: fixed (full screen) by design. To scope it to a frame, as the demo above does, put it in a position: relative container and pass style={{ position: "absolute" }}. Going the other way, a full-screen scrim rendered deep inside a clipped or transformed container belongs in a Portal, so no ancestor can clip it.

Props#

Extends div props:

Backdrop has no keyboard behavior of its own: it doesn't trap focus or close on Escape. If it blocks the page, move focus to what it's waiting on, or use Modal, which handles both.