Overlay

The overlay puts a page overtop of the whole page. It's useful if you want to temporarily block the current page content without navigating to a new page.

For example, the Error and Modal components use overlays to show content without navigating to a new page.

You'll want to include functionality to hide an show the Overlay, otherwise it will block all content on the screen.

Props

background "solid"|"gradient|null" null
Normally the overlay is a transparent black background, but you can force it to be a solid white background or gradient background

colors Array<String> ["#ef008f", "#6ec3f4", "#7038ff", "#ffba27"]
The colors for your gradient fill, if background is gradient. Must be at least two colors.

transition_duration number 0
Add the time in milliseconds that you want the overlay to fade in

onclick function
An function that will be fired when the overlay is clicked.

<script>
  import { Overlay, Center, Button, Spinner } from "bubbles-ui";

  let overlayToggle = false;
</script>

{#if overlayToggle}
  <Overlay background="solid" transition_duration={500} onclick={() => (overlayToggle = false)}>
    <Center>
      <Spinner size={5} color="primary" />
      <p>Loading Your Data (Click anywhere to close the overlay)</p>
    </Center>
  </Overlay>
{/if}

<Button
  label="Show Overlay"
  wide={true}
  mb={true}
  onclick={() => {
    overlayToggle = true;
  }}
/>

Overlay

Props

Overlay Demo