Plus UI
Plus UI ↗️Be Our Sponsor ↗️
  • Getting Started
    • Documentation Overview
    • Component List & Plans
    • Support
    • Contributing
    • FAQs
  • UI Library
    • Overview
    • Changelog
    • Installation
      • React
      • Vue
      • Angular
      • Svelte
  • Design System
    • Overview
    • Setting up on Figma
    • Styles & Variables
  • Components
    • Overview
    • Accordion
    • Alert
    • Avatar
    • Badge
    • Button
    • Button Group
    • Breadcrumb
    • Checkbox
    • Chip
    • Divider
    • Drawer
    • Dropdown
    • Input
    • Link
    • Modal
    • Popconfirm
    • Popover
    • Progress
    • Radio
    • Rating
    • Select
    • Tab
    • Textarea
    • Toast
    • Toggle
    • Tooltip
  • Foundation
    • Overview
    • Color
      • Color Palette
      • Color Variables
      • Color Token List
    • Typography
    • Icons
    • Border
    • Spacing
    • Opacity
    • Shadows & Effects
    • Breakpoints
  • Customization
    • Customization
    • Theme
    • Accessibility
    • Tokens
Powered by GitBook
On this page
  • Anatomy
  • Properties
  • Size
  • Status
  • Layout & Spacing
  • Light & Dark Mode
  • Accessibility
  • Design System
  • API

Was this helpful?

  1. Components

Toast

Effortless Notifications, Toasted to Perfection!

PreviousTextareaNextToggle

Last updated 1 year ago

Was this helpful?

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

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.

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

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

Plus UI Design System | Figma CommunityFigma
Plus UI Design System on Figma
Logo
anatomy of toast component
layout & spacing of toast component
light & dark mode of toast component