Imperative Surface Imperative Surface

SurfaceArgs

SurfaceArgs contains options shared by dialogs and sheets.

export interface SurfaceArgs<T = any> {
  body?: ComponentType<SurfaceContext<T>>;
  props?: any;
  barrierDismissible?: boolean;
}

body

The React component rendered inside the surface.

function MyDialog({ pop }: SurfaceContext<boolean>) {
  return <button onClick={() => pop(true)}>Continue</button>;
}

Surface.Dialog.present({
  body: MyDialog,
});

props

Arbitrary data passed to body.

Surface.Dialog.present({
  body: UserDialog,
  props: {
    userId: '123',
  },
});

barrierDismissible

When true or omitted, clicking the backdrop dismisses the surface.

barrierDismissible: false

Set it to false when the user must complete or explicitly cancel an interaction.

On this page