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.

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

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.

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;

<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
  }
}

<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>

<!-- 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.

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;

<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
  }
}

<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();

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.

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.

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.

Design System

API

PreviousTextarea NextToggle

Last updated 6 months ago