Toast
CdrToast
Non-modal dialog used to communicate the status of a task or process.
# Overview
CdrToast is a type of non-modal dialog used to communicate the status of a task or process. A proper toast is concise, time-relevant, and temporary.
There are five different options for styling the toast, based on the message type.
# Default toast with icon
A toast should be passed a contextually appropriate icon using the icon-left slot.
# Persistent toast
CdrToast provides an optional autoDismiss property to disable the auto-dismiss functionality.
# Adjusting auto-dismiss timing
CdrToast provides an optional dismissDelay property to adjust timing of the automatic dismissal under certain conditions, such as when the toast contains an action.
# Accessibility
- All CdrToast components provide
role="status"to expose the notification to Accessibility APIs
Many WCAG requirements are contextual to their implementation. To ensure that usage of this component complies with accessibility guidelines you are responsible for the following:
- Don't rely on color alone to convey your message. Provide an additional indicator to color, like an icon: WCAG 1.4.1 (opens new window)
- Error Identification techniques and criteria: WCAG 3.3.1 (opens new window)
- See Transient Status Notifications for more information
# Guidelines
There are five information types supported for toasts: error, warning, success, informational, and default. Each type corresponds with a color and icon to provide a consistent, universal experience for users.
# Information types
# Error
Use to inform that something went wrong. They affect or block the user's experience and must be resolved before moving forward.
# Warning
Use for a message requiring attention but not resolution in order to continue. Warning toasts might tell a user what could happen if they don’t address what they’re being warned about.
# Success
Use to communicate that an action has been successfully completed. Provides a positive response to user actions. No action is required.
# Informational
Use to provide context around a situation. No action is required.
# Default
Use to provide generic messaging that does not fit the other types
# Use when
- Confirming that a task or process initiated by the user was completed successfully
- Providing contextual information on the page processes
- Read more about using Toasts for Transient Status Notifications
# Don’t use when
- When a user’s input is required
- When critical information is being communicated
- When communicating alerts
# Content
- An icon is both user-configurable and required
- Titles should not exceed three words
- Body copy should not exceed two lines
- Content should be focused and be specific to a single message
- Actions or links must be available elsewhere on the page
# Structure
- The width of a toast is fixed for non-mobile implementations
- The height of a toast is variable, content depending
# Behavior
- Toasts auto-dismiss after 5 seconds—ten if it includes an action
- Toasts may be manually dismissed sooner via the close button
- Mousing over a toast will pause the auto-dismiss timer and reset it on mouse leave.
# Placement
- Toasts are delivered from the top-right of a viewport (desktop) or at the top and spanning the full-width (mobile)
- The most recent toast is always displayed on top of a stack
# API
View it on Github: https://github.com/rei/rei-cedar-vue-2/tree/next/src/components/toast# Props
type
name
string
type
'default'
default
Sets the toast style. Possible values: { 'info' | 'success' | 'warning' | 'error' | 'default'}
open
name
boolean
type
false
default
Used to programmatically control the toast open/close state
autoDismiss
name
boolean
type
true
default
If set to `false`, the toast will not automatically close after the set interval
dismissDelay
name
number
type
5000
default
Used to change the interval (in milliseconds) before the toast automatically closes
# Slots
Find more information about using Slots in the article Installing Cedar.
default
name
Slot for notification content
icon-left
name
Slot for icon matching toast messaging type
# Events
open
name
event
arguments
$emit event fired when opening the toast
closed
name
event
arguments
$emit event fired when closing the toast
# Usage
# Positioning
CdrToast component(s) should be positioned in the top-right corner of the viewport. On smaller screens, they should appear at the top of the page and span the whole width of the viewport.
# Elevation
The CdrToast container should be be given an appropriate z-index value so that the toast components within will "float" on top of the other page elements.
# Multiples
If multiple CdrToast components are present, they should appear stacked with the newest at the bottom. Note: When a toast is closed, any toast components below it will take the place of the one above.