Feedback

Lightbox

A full-screen image viewer on a native modal dialog.

<script>
  import { Lightbox } from "@codeatlasdev/ui";

  let open = $state(false);
</script>

<button onclick={() => (open = true)}>View photo</button>
<Lightbox bind:open src={url} alt="Photo sent by Maria" />

The image is contained in the viewport and respects the device safe areas. Escape, the close button and a click on the backdrop close it. Because it is a native modal <dialog>, the page behind is inert, focus returns to the trigger and scrolling is locked while it is open. alt is required.

<script lang="ts">
  import { Button, Lightbox } from '@codeatlasdev/ui';

  const photo =
    "data:image/svg+xml;utf8," +
    encodeURIComponent(
      '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="400"><rect width="640" height="400" fill="#334155"/><circle cx="320" cy="200" r="90" fill="#94a3b8"/></svg>'
    );
  let open = $state(false);
</script>

<Button variant="outlined" onclick={() => (open = true)}>View photo</Button>
<Lightbox bind:open src={photo} alt="Gray circle on a dark background" />