Skip to content
UI
v0.3.1

Search the docs

Toast

Short notifications from a queue, polite or urgent.

Example

Report ready Weekly report for 9 games.
Saved
toast.example.svelte 
<script lang="ts">
  import { UiToastQueue } from '@onlywin/ui-core';
  import { Button, Toast, ToastRegion } from '@onlywin/ui-svelte';

  const queue = new UiToastQueue();
</script>

<div class="example-stack">
  <div class="example-row">
    <Button onclick={() => queue.push({ title: 'Saved', tone: 'success' })}
      >Save</Button
    >
    <Button
      onclick={() =>
        queue.push({
          description: 'The wallet did not answer.',
          title: 'Round not closed',
          tone: 'danger',
        })}>Fail</Button
    >
  </div>
  <Toast
    title="Report ready"
    description="Weekly report for 9 games."
    tone="info"
  />
  <Toast title="Saved" tone="success" />
  <ToastRegion {queue} />
</div>

Usage

Do

  • Confirm what happened in a few words: Saved, Round closed.

Don’t

  • Do not put the only copy of important information in a toast.

Accessibility

  • A polite status for most toasts; danger is an alert, announced at once and kept until dismissed.
  • The region is a labelled landmark; at most four toasts show at once.

Keyboard

Toast keyboard interactions
Keys Action
Tab, Shift+Tab Move focus in and out
Enter on the close button Dismiss

Props

The same props in both frameworks. In React, class is className, events are camelCase (onClick), content passed as Svelte snippets is a ReactNode prop, every bindable value has a default… twin for uncontrolled use, and elementRef reaches the DOM element.

ToastRegion

ToastRegion props
Prop Type Default Description
position 'bottom' | 'top' 'bottom'
queue *required UiToastQueue — The page's toast queue: `queue.push({ title, tone })` shows one here.

Toast

Toast props
Prop Type Default Description
announce boolean true `false` inside a toast region, whose live regions announce it; a lone toast is its own live region.
description string | null null
onDismiss () => void —
title *required string —
tone TUiToastTone 'info'