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.
// Sample code
<CheckBox
label="Label"
onChange={(e)=>{console.log(e.target.checked}}
/>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.
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
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
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.
Last updated
Was this helpful?