Overlays

Toast

A short message in a corner of the screen that goes away by itself.

From HTML

HTML

<button class="pw-btn" data-pw-toast="Draft saved">Plain</button>
<button class="pw-btn" data-pw-toast="Your profile is updated" data-type="success">Success</button>
<button class="pw-btn" data-pw-toast="We could not reach the server" data-title="Not saved" data-type="error">Error</button>
<button class="pw-btn" data-pw-toast="Your trial ends in 3 days" data-type="warning">Warning</button>
<button class="pw-btn" data-pw-toast="A new version is ready" data-type="info">Info</button>

With an action

Give people a way back. The toast waits while the pointer or the focus is on it.

HTML

<button class="pw-btn" id="demo-toast-undo">Delete a file</button>
<button class="pw-btn" id="demo-toast-stay">Stays until closed</button>

JavaScript

document.getElementById('demo-toast-undo').addEventListener('click', function () {
  Partwise.toast({
    title: 'File deleted', text: 'report-final.pdf', duration: 7000,
    action: { label: 'Undo', onClick: function () { Partwise.toast.success('File restored'); } }
  });
});
document.getElementById('demo-toast-stay').addEventListener('click', function () {
  Partwise.toast({ text: 'Upload finished: 14 photos', type: 'success', duration: 0 });
});

Position

HTML

<button class="pw-btn" data-pw-toast="Top left" data-position="top-left">Top left</button>
<button class="pw-btn" data-pw-toast="Top center" data-position="top-center">Top center</button>
<button class="pw-btn" data-pw-toast="Top right" data-position="top-right">Top right</button>
<button class="pw-btn" data-pw-toast="Bottom left" data-position="bottom-left">Bottom left</button>
<button class="pw-btn" data-pw-toast="Bottom center" data-position="bottom-center">Bottom center</button>

Options

Set them as attributes on the element.

Attribute	Default	What it does
`data-pw-toast`		On a button: the text of the toast.
`data-title`		A bold first line.
`data-type`		`success`, `error`, `warning` or `info`.
`data-duration`	`4000`	Milliseconds. `0` keeps it until it is closed.
`data-position`	`bottom-right`	One of six places.

From your script

Partwise.toast('Saved');
Partwise.toast.success('Profile updated');
var t = Partwise.toast({ title: 'Uploading', text: '3 files', duration: 0, dismiss: false });
t.close();

Partwise.toast.position = 'top-right';   // for all toasts that follow
Partwise.toast.clear();

Keyboard

Key	Action
`Tab`	Reaches the action and the close button. The timer waits while the focus is there.

Good to know

Toasts are announced by screen readers: errors at once, the others when the reader is idle.
Five toasts show at most. Older ones make room.
Toasts stay above open modals.
Do not use a toast for something people must not miss. It can be gone before they look.

Files

Everything is in dist/partwise.css and dist/partwise.js. To load only this component, use src/css/00-base.css and src/js/00-core.js plus: css/15-toast.css, js/15-toast.js.