Toast

Design System - Toast component

The Toast component delivers brief, unobtrusive feedback messages to inform users about the result of an action. It is accessible, timely, and clearly distinguishes message types through consistent visual cues and positioning.

Component React

// Sample code

 <Toast
    label="Success Toast Message"
    populators={{
      name: 'toast'
    }}
    style={{}}
    transitionTime={600000}
    type="success"
  />

Component Flutter

Component Design

Anatomy

---

Variants

---

	Success Indicates a successful or completed action, with a green background and check icon.
	Warning Alerts users to potential issues that need attention but aren’t critical. Often styled with an amber background.
	Info Provides general information or guidance in blue, without urgency.
	Error Communicates a failure or problem, using red tones to draw immediate attention.

Properties

Input Text Custom message text that conveys the result or information clearly and concisely.
Duration Specifies how long the toast remains visible on the screen, usually in milliseconds.

Property Configuration Table

Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.

React

Property	Value	Default
label	text	-
onClose	text	no
isDleteBtn	yes/no	no
transitionTime	yes/no	-
type	number	-
style	yes/no	-
labelstyle	yes/no	no
isWarningButtons	yes/no	no
onYes	yes/no	no
onNo	number	no
variant	yes/no	no

Flutter

---

Behaviours

	Auto Dismiss Toast automatically disappears after the defined duration.
	Manual Dismiss Users can manually close a toast using the close icon.

---

Usage Guide

---

	Keep messages brief and time-sensitive Use short and actionable text that disappears automatically after 3-5 seconds. Ensure it provides immediate value without interrupting workflow and is horizontally centre-aligned for better visibility.. Never stack multiple toasts; excessive toasts overwhelm users and dilute the importance of urgent notifications.

Changelog

---

Date	Number	Notes
Dec 15, 2024	v-0.0.2	This component is added to the website. This component is now individually versioned.

Design Checklist

---

	All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
	Accessible contrast for text - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
	Accessible contrast for UI components - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
	Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
	Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
	Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
	Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
	Content guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
	Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
	Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
	Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.