Toast

Effortless Notifications, Toasted to Perfection!

The Toast Component serves as a dynamic notification system designed to inform users of updates, success messages, errors, or other fleeting information without interrupting their workflow. Lightweight and highly customizable, it seamlessly integrates into any application, offering a non-disruptive way to convey important messages on-the-fly.

Anatomy

The anatomy of the Toast Component comprises a concise container that encapsulates a message and, optionally, an icon or action button. This container is designed to appear over the application's content temporarily, ensuring visibility without blocking user interaction. The component typically includes a title, message body, and can be enhanced with icons for context or buttons for user actions.

anatomy of toast component

Properties

The Plus UI Toast Component comes with customizable properties such as size, orientation, status, and invert to fine-tune its presentation and functionality. These properties empower developers to craft notifications that are not only consistent with the application’s design but also cater to the context and urgency of the information being conveyed, enhancing user engagement and satisfaction.

Size	Status
Small	Primary
Medium	Default
Large	Info
	Warning
	Success
	Error

Size

• Small size toast component is compact, suitable for short messages.

• Medium size toast component is the standard size, balanced for general use.

• Large size toast component is spacious, ideal for detailed notifications.

React

import React, { useRef } from 'react';
import { PlusToast, PlusButton } from '@plusui/react';

// Function to trigger toast with given size
const showToast = (toastRef, message) => {
  toastRef.current.message = message;
  toastRef.current.show();  // Trigger the toast's show() method
};

const ToastSizeExamples = () => {
  const smallToastRef = useRef(null);
  const mediumToastRef = useRef(null);
  const largeToastRef = useRef(null);

  return (
    <>
      {/* Small Toast */}
      <PlusButton onClick={() => showToast(smallToastRef, 'This is a small toast')}>Show Small Toast</PlusButton>
      <PlusToast ref={smallToastRef} size="sm" />

      {/* Medium Toast */}
      <PlusButton onClick={() => showToast(mediumToastRef, 'This is a medium toast')}>Show Medium Toast</PlusButton>
      <PlusToast ref={mediumToastRef} size="md" />

      {/* Large Toast */}
      <PlusButton onClick={() => showToast(largeToastRef, 'This is a large toast')}>Show Large Toast</PlusButton>
      <PlusToast ref={largeToastRef} size="lg" />
    </>
  );
};

export default ToastSizeExamples;

Angular

<div>
  <!-- Small Toast -->
  <plus-button (click)="showToast('small-toast', 'This is a small toast')">Show Small Toast</plus-button>
  <plus-toast id="small-toast" size="sm"></plus-toast>

  <!-- Medium Toast -->
  <plus-button (click)="showToast('medium-toast', 'This is a medium toast')">Show Medium Toast</plus-button>
  <plus-toast id="medium-toast" size="md"></plus-toast>

  <!-- Large Toast -->
  <plus-button (click)="showToast('large-toast', 'This is a large toast')">Show Large Toast</plus-button>
  <plus-toast id="large-toast" size="lg"></plus-toast>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-toast-size',
  templateUrl: './toast-size.component.html',
})
export class ToastSizeComponent {
  showToast(toastId: string, message: string) {
    const toast = document.getElementById(toastId) as any;
    toast.message = message;
    toast.show();  // Trigger the toast's show() method
  }
}

Vue

<template>
  <div>
    <!-- Small Toast -->
    <plus-button @click="showSmallToast">Show Small Toast</plus-button>
    <plus-toast ref="smallToast" size="sm"></plus-toast>

    <!-- Medium Toast -->
    <plus-button @click="showMediumToast">Show Medium Toast</plus-button>
    <plus-toast ref="mediumToast" size="md"></plus-toast>

    <!-- Large Toast -->
    <plus-button @click="showLargeToast">Show Large Toast</plus-button>
    <plus-toast ref="largeToast" size="lg"></plus-toast>
  </div>
</template>

<script>
export default {
  methods: {
    showSmallToast() {
      this.$refs.smallToast.message = 'This is a small toast';
      this.$refs.smallToast.show();  // Trigger the toast's show() method
    },
    showMediumToast() {
      this.$refs.mediumToast.message = 'This is a medium toast';
      this.$refs.mediumToast.show();  // Trigger the toast's show() method
    },
    showLargeToast() {
      this.$refs.largeToast.message = 'This is a large toast';
      this.$refs.largeToast.show();  // Trigger the toast's show() method
    },
  },
};
</script>

Javascript

<!-- Function to show toast -->
<script>
function showToast(toastId, message) {
  const toast = document.getElementById(toastId);
  toast.message = message;
  toast.show();  // Trigger the toast's show() method
}
</script>

<div>
  <!-- Small Toast -->
  <plus-button onclick="showToast('small-toast', 'This is a small toast')">Show Small Toast</plus-button>
  <plus-toast id="small-toast" size="sm"></plus-toast>

  <!-- Medium Toast -->
  <plus-button onclick="showToast('medium-toast', 'This is a medium toast')">Show Medium Toast</plus-button>
  <plus-toast id="medium-toast" size="md"></plus-toast>

  <!-- Large Toast -->
  <plus-button onclick="showToast('large-toast', 'This is a large toast')">Show Large Toast</plus-button>
  <plus-toast id="large-toast" size="lg"></plus-toast>
</div>

Status

• Primary toast component stands out, used for important general messages.

• Default toast component is the standard look, for neutral messages.

• Info toast component indicates informational messages.

• Error toast component highlights errors or issues.

• Warning toast component signals caution or warnings.

• Success toast component denotes successful actions or processes.

React

import React, { useRef } from 'react';
import { PlusToast, PlusButton } from '@plusui/react';

// Function to trigger toast with given status
const showToast = (toastRef, message, status) => {
  toastRef.current.message = message;
  toastRef.current.status = status;
  toastRef.current.show();  // Trigger the toast's show() method
};

const ToastStatusExamples = () => {
  const successToastRef = useRef(null);
  const warningToastRef = useRef(null);
  const errorToastRef = useRef(null);
  const infoToastRef = useRef(null);
  const defaultToastRef = useRef(null);

  return (
    <>
      {/* Success Toast */}
      <PlusButton onClick={() => showToast(successToastRef, 'Operation successful', 'success')}>Show Success Toast</PlusButton>
      <PlusToast ref={successToastRef} />

      {/* Warning Toast */}
      <PlusButton onClick={() => showToast(warningToastRef, 'Warning: Check this', 'warning')}>Show Warning Toast</PlusButton>
      <PlusToast ref={warningToastRef} />

      {/* Error Toast */}
      <PlusButton onClick={() => showToast(errorToastRef, 'An error occurred', 'error')}>Show Error Toast</PlusButton>
      <PlusToast ref={errorToastRef} />

      {/* Info Toast */}
      <PlusButton onClick={() => showToast(infoToastRef, 'Here is some information', 'info')}>Show Info Toast</PlusButton>
      <PlusToast ref={infoToastRef} />

      {/* Default Toast */}
      <PlusButton onClick={() => showToast(defaultToastRef, 'This is a default toast', 'default')}>Show Default Toast</PlusButton>
      <PlusToast ref={defaultToastRef} />
    </>
  );
};

export default ToastStatusExamples;

Angular

<div>
  <!-- Success Toast -->
  <plus-button (click)="showToast('success-toast', 'Operation successful', 'success')">Show Success Toast</plus-button>
  <plus-toast id="success-toast"></plus-toast>

  <!-- Warning Toast -->
  <plus-button (click)="showToast('warning-toast', 'Warning: Check this', 'warning')">Show Warning Toast</plus-button>
  <plus-toast id="warning-toast"></plus-toast>

  <!-- Error Toast -->
  <plus-button (click)="showToast('error-toast', 'An error occurred', 'error')">Show Error Toast</plus-button>
  <plus-toast id="error-toast"></plus-toast>

  <!-- Info Toast -->
  <plus-button (click)="showToast('info-toast', 'Here is some information', 'info')">Show Info Toast</plus-button>
  <plus-toast id="info-toast"></plus-toast>

  <!-- Default Toast -->
  <plus-button (click)="showToast('default-toast', 'This is a default toast', 'default')">Show Default Toast</plus-button>
  <plus-toast id="default-toast"></plus-toast>
</div>

import { Component } from '@angular/core';

@Component({
  selector: 'app-toast-status',
  templateUrl: './toast-status.component.html',
})
export class ToastStatusComponent {
  showToast(toastId: string, message: string, status: string) {
    const toast = document.getElementById(toastId) as any;
    toast.message = message;
    toast.status = status;
    toast.show();  // Trigger the toast's show() method
  }
}

Vue

<template>
  <div>
    <!-- Success Toast -->
    <plus-button @click="showSuccessToast">Show Success Toast</plus-button>
    <plus-toast ref="successToast" />

    <!-- Warning Toast -->
    <plus-button @click="showWarningToast">Show Warning Toast</plus-button>
    <plus-toast ref="warningToast" />

    <!-- Error Toast -->
    <plus-button @click="showErrorToast">Show Error Toast</plus-button>
    <plus-toast ref="errorToast" />

    <!-- Info Toast -->
    <plus-button @click="showInfoToast">Show Info Toast</plus-button>
    <plus-toast ref="infoToast" />

    <!-- Default Toast -->
    <plus-button @click="showDefaultToast">Show Default Toast</plus-button>
    <plus-toast ref="defaultToast" />
  </div>
</template>

<script>
export default {
  methods: {
    showSuccessToast() {
      const toast = this.$refs.successToast;
      toast.message = 'Operation successful';
      toast.status = 'success';
      toast.show();  // Trigger the toast's show() method
    },
    showWarningToast() {
      const toast = this.$refs.warningToast;
      toast.message = 'Warning: Check this';
      toast.status = 'warning';
      toast.show();  // Trigger the toast's show() method
    },
    showErrorToast() {
      const toast = this.$refs.errorToast;
      toast.message = 'An error occurred';
      toast.status = 'error';
      toast.show();  // Trigger the toast's show() method
    },
    showInfoToast() {
      const toast = this.$refs.infoToast;
      toast.message = 'Here is some information';
      toast.status = 'info';
      toast.show();

Javascript

Layout & Spacing

The layout and spacing within the Toast Component are optimized for clarity and readability. Adequate margins and padding ensure that the message and any interactive elements are easily distinguishable and accessible, while the overall size of the toast is balanced to be noticeable without overwhelming the user's screen space.

layout & spacing of toast component

Light & Dark Mode

Designed with adaptability in mind, the Toast Component effortlessly transitions between light and dark modes, ensuring that notifications are legible and aesthetically consistent with the overall theme of the application. This feature enhances the visual experience for users, regardless of their preferred theme or current environment lighting.

light & dark mode of toast component

Accessibility

Accessibility considerations are integral to the Toast Component, featuring screen reader support, keyboard navigation for any interactive elements, and adherence to ARIA guidelines. This focus ensures that all users, regardless of their abilities, can receive and interact with notifications, making the application more inclusive and user-friendly.

Criteria	Description	Status
ARIA Attributes	Elements must only use allowed ARIA attributes	✔️ Passed
ARIA Role	ARIA role should be appropriate for the element	✔️ Passed
Inline Text	Inline text spacing must be adjustable with custom stylesheets	✔️ Passed
ID Attributes	Ensures every id attribute value is unique	✔️ Passed
Color Contrast	Ensures the contrast between foreground and background colors meets WCAG 2 AA contrast ratio thresholds	✔️ AA ~ AAA

Design System

Plus UI Design System | Figma CommunityFigma

Plus UI Design System on Figma

API

Property	Description	Type	Accepted Values	Default
size	Sets the size of the toast	String	sm, md, lg	md
kind	Determines the style of the toast	String	filled, outlined	filled
placement	Sets the position of the toast in the group	String	top-start, top-end, bottom-start, bottom-end	top-start
status	Sets the status of the toast	String	default, info, success, warning, error	default
invert	Inverts the colors of the toast	Boolean	true, false	false
dismiss	Allows the toast to be dismissible	Boolean	true, false	false
duration	Sets the duration (in milliseconds) the toast stays on-screen	Number	Any positive number	3000
position	Defines the toast's position relative to the screen	String	top-left, top-right, bottom-left, bottom-right	top-right
message	The text message displayed in the toast	String	Any valid string	null
icon	Custom icon for the toast	String	Any valid icon class	Depends on status