syidaxdesign system
Home Pricing Settings
ComponentsFeedback

Toast

A notification that briefly shows a task result and closes automatically.

<sy-toast>Installation guide Basic usage
Live preview
Interact with the component to see results here.
View code
HTML
<sy-toast duration="3000" id="sample"></sy-toast>
<div class="demo-actions"
  style="display:flex;flex-wrap:wrap;gap:8px;margin-top:16px"
>
  <sy-button id="action-0" size="small">Show toast</sy-button>
</div>
<output id="demo-result" aria-live="polite"></output>

<script type="module">
  const describeResult = value => JSON.stringify(value, (_key, item) => {
    if (item instanceof File) return {
      name: item.name,
      size: item.size,
      type: item.type
    };
    if (item instanceof Element) return `<${item.localName}>`;
    return item;
  }) ?? 'Done';
  const actionTarget0 = document.querySelector("#sample");
  document.querySelector('#action-0').addEventListener('click', async () => {
    const result = await actionTarget0.createToast("success", {
      "headerSlot": "Saved successfully",
      "bodySlot": "Project changes have been saved.",
      "closable": true,
      "duration": 3000,
      "position": "bottomRight"
    });
    document.querySelector('#demo-result').textContent = describeResult(result);
  });
</script>

Usage guide

#

Use for brief feedback that does not interrupt work, such as successful saving. Use Modal when a response is required.

  1. Create a notification

    Create notifications with createToast() or status-specific methods. They stack at the specified position in the document body.

  2. Set the duration

    duration is in milliseconds. 0 disables automatic dismissal. Provide closable for persistent notifications.

  3. Dismiss to match the workflow

    Use closeToast() when the app's workflow requires dismissal.

Feature examples

#

Choose a feature from 18 topics. Explore property settings, method calls, event results, and slot layouts through live examples and code.

Usage examples · Item Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code
HTML
Loading the example.

Usage examples · Overview

Try the selected example. Topics with multiple configurations let you switch between detailed examples.

View code
HTML
Loading the example.

Property · Animation

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · AnimationSpeed

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Duration

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Item Attributes / Closable

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Item Attributes / Duration

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Item Attributes / Position

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Item Attributes / Variant

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Property · Latest Top

See how settings change appearance and behavior.

View code
HTML
Loading the example.

Methods · CloseToast

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · CreateErrorToast

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · CreateInfoToast

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · CreateNeutralToast

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · CreateSuccessToast

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · CreateToast

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Methods · CreateWarningToast

Use the example's buttons to call methods and inspect their results.

View code
HTML
Loading the example.

Usage examples · Toast slots and individual control

Add an icon, title, body, and footer to a custom Toast Item. Call show() to display it and close() to remove it. Create a new instance to show it again.

View code
HTML
<sy-button id="new-toast">Show notification</sy-button>
<sy-button id="close-toast">Close current notification</sy-button>

<script type="module">
  await (root => {
    let current;
    root.querySelector('#new-toast').addEventListener('click', async () => {
      await current?.close();
      current = document.createElement('sy-toast-item');
      current.duration = 0;
      current.closable = true;
      current.innerHTML = _msg("m_bb89f25d8ea4");
      root.append(current);
      await current.show();
    });
    root.querySelector('#close-toast').addEventListener('click', () => current?.close());
  })(document);
</script>

API reference

#

Hover over a name or focus it with the keyboard to see the code. On touch screens, tap the name.

<sy-toast>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalseShow new notifications first at the same position.
number3000Time before automatic dismissal, in milliseconds. Set to 0 to keep it open.
HTMLSyToastItemElement['animation']'none'Default enter/exit animation for spawned toasts. Per-call `option.animation` overrides this.

Pass objects and arrays as JavaScript properties.

HTMLSyToastItemElement['animationSpeed']'fast'Default animation speed for spawned toasts. Per-call `option.animationSpeed` overrides this.

Pass objects and arrays as JavaScript properties.

Methods

MethodReturnsDescription
Promise<HTMLSyToastItemElement>Create a notification with the specified status and options.
Promise<HTMLSyToastItemElement>Create a neutral notification.
Promise<HTMLSyToastItemElement>Create a success notification.
Promise<HTMLSyToastItemElement>Create an error notification.
Promise<HTMLSyToastItemElement>Create an informational notification.
Promise<HTMLSyToastItemElement>Create a warning notification.
Promise<void>Close the supplied sy-toast-item element.

Slots

SlotDescription
Content displayed in the icon area.
Content displayed in the header area.
Content displayed in the body area.
Content displayed in the footer area.

<sy-toast-item>

Properties

Attribute / PropertyTypeDefaultDescription
booleanfalseWhether the notification is visible. Control it with the show and close methods.
'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight''bottomRight'Item layout direction.
'neutral' | 'success' | 'error' | 'info' | 'warning''neutral'Component display style.
booleanfalseShow the close button.
numberundefinedTime before automatic dismissal, in milliseconds. Set to 0 to keep it open.
booleanfalseShow new notifications first at the same position.
| 'none' | 'fade' | 'fade-scale' | 'zoom' | 'pop' | 'slide-top' | 'slide-bottom' | 'slide-left' | 'slide-right' | 'slide-fade-top' | 'slide-fade-bottom' | 'slide-fade-left' | 'slide-fade-right' | 'reveal-top' | 'reveal-bottom' | 'reveal-left' | 'reveal-right' | 'flip-x' | 'flip-y' | 'bounce' | 'spin''none'Enter/exit animation type. `none` (default) toggles instantly.
'x-fast' | 'fast' | 'medium' | 'slow' | 'x-slow''fast'Animation playback speed token. Maps to `--transition-*` global tokens.

Methods

MethodReturnsDescription
Promise<void>Show the notification.
Promise<void>Close the open panel.

Slots

SlotDescription
Content displayed in the icon area.
Content displayed in the header area.
Content displayed in the body area.
Content displayed in the footer area.
Design SystemTab Navigate Enter Open