Pixel UI/Overlays/Toast

Toast

Notifications with a pixel fuse that burns down while they are up.

<piix-toaster>WebGL

Success

Error

Info

Piixpal.toast('Copied to clipboard');

Piixpal.toast('Your changes are live.', {
  tone: 'ok',            // info | ok | warn | error
  title: 'Deployed',
  duration: 4.5,         // seconds; 0 stays until closed
  action: { label: 'View site', onClick: () => open('/') }
});

Call Piixpal.toast() from anywhere. Toasts step in from the corner, stack up, and along the bottom a thin pixel fuse burns down with a spark at its tip. When it runs out the toast wipes away. Hover or focus one and the fuse stops. Add a <piix-toaster> if you want to choose the corner or the theme.

Installation

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

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

npm install piixpal

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

// npm install piixpal
import "piixpal";

export default function Page() {
  return (
    Piixpal.toast('Copied to clipboard');
    
    Piixpal.toast('Your changes are live.', {
      tone: 'ok',            // info | ok | warn | error
      title: 'Deployed',
      duration: 4.5,         // seconds; 0 stays until closed
      action: { label: 'View site', onClick: () => open('/') }
    });
  );
}

Usage

Piixpal.toast('Copied to clipboard');

Piixpal.toast('Your changes are live.', {
  tone: 'ok',            // info | ok | warn | error
  title: 'Deployed',
  duration: 4.5,         // seconds; 0 stays until closed
  action: { label: 'View site', onClick: () => open('/') }
});

Examples

Light, at the top

One toaster per page sets where and how they show.

Set on the page: <piix-toaster position="top" theme="light">

<piix-toaster position="top" theme="light"></piix-toaster>

API reference

Attribute	What it does	Default
`tone`	`info` `ok` `warn` `error`	`info`
`title`	a bold first line	–
`duration`	seconds before it burns out; 0 keeps it	`4.5`
`action`	`{ label, onClick }`: a button in the toast	–
`position (toaster)`	`bottom-right` `bottom-left` `top-right` `top-left` `bottom` `top`	`bottom-right`
`theme (toaster)`	`dark` `light`	`dark`

Accessibility

Errors are announced straight away; everything else politely.
Hover or focus pauses the timer, so nobody loses a toast while reading it.
Every toast can be dismissed with its close button.