Dialog

Copy<piix-glow-button data-piix-open="deploy">Deploy</piix-glow-button>

<piix-dialog id="deploy">
  <h2>Deploy to production?</h2>
  <p>This publishes 14 changes. You can roll back at any time.</p>
  <piix-glow-button data-close>Deploy now</piix-glow-button>
</piix-dialog>

It's the browser's own <dialog> underneath, so focus is trapped inside, Escape closes it and focus goes back where it came from. The panel is drawn on the GPU and dissolves in over a dithered backdrop. Anything with data-piix-open="its id" opens it; anything inside with data-close closes it, and so does clicking the backdrop.

Installation

Copy<!-- once, anywhere on the page: every component -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/piixpal.min.js"></script>

Copy<!-- just dialog (the shared engine loads itself, once) -->
<script src="https://cdn.jsdelivr.net/npm/piixpal@0.6/dist/c/dialog.min.js"></script>

Copynpm install piixpal

// once, in your entry file
import "piixpal";

Copy// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    <piix-glow-button data-piix-open="deploy">Deploy</piix-glow-button>
    
    <piix-dialog id="deploy">
      <h2>Deploy to production?</h2>
      <p>This publishes 14 changes. You can roll back at any time.</p>
      <piix-glow-button data-close>Deploy now</piix-glow-button>
    </piix-dialog>
  );
}

Usage

Copy<piix-glow-button data-piix-open="deploy">Deploy</piix-glow-button>

<piix-dialog id="deploy">
  <h2>Deploy to production?</h2>
  <p>This publishes 14 changes. You can roll back at any time.</p>
  <piix-glow-button data-close>Deploy now</piix-glow-button>
</piix-dialog>

Examples

Frosted glass

With look="glass" the page behind blurs through the panel.

Copy<piix-glow-button look="glass" data-piix-open="glassy">Open</piix-glow-button>

<piix-dialog id="glassy" look="glass">
  <h2>Frosted</h2>
  <p>Everything behind me is blurred, the rim and the glare are pixels.</p>
  <piix-glow-button look="glass" data-close>Lovely</piix-glow-button>
</piix-dialog>

Terminal

Copy<piix-glow-button look="crt" data-piix-open="term">Run</piix-glow-button>

<piix-dialog id="term" look="crt">
  <h2>rm -rf node_modules?</h2>
  <p>This frees 1.2 GB. It also means a long npm install.</p>
  <piix-glow-button look="crt" data-close>yes, do it</piix-glow-button>
</piix-dialog>

API reference

Events

Accessibility

• A real modal dialog: focus is trapped inside and Escape closes it.
• It is labelled by its first heading.
• Focus goes back to whatever opened it.
• With reduced motion it simply appears.