Toast

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

# 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 page
  • The most recent toast is always displayed on top of a stack

# API

# 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 Getting Started as a Developer.

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 contained within a position: absolute container in the top-right corner of your page. 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.