Toasts

Passive user-triggered notifications

Demo

API

Tag

Name	Description
`<s-toasts>`	Custom Element, does not accept content

Attributes

Name	Value	Required	Description
`i18n`	string		A stringified JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Properties

Name	Value	Required	Description
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.

Methods

Name	Description
`createToast(toastData)`	Call this method to create or update a toast element. See ToastData type reference below for details.
`getToast(toastId)`	Call this method to get a toast element by id.
`updateToast(toastId, toastData)`	Call this method to update a toast element by id with data matching ToastData type.
`dismissToast(toastId)`	Call this method to dismiss a toast element by its id.
`dismissAllToasts()`	Call this method on every major context change to dismiss all toasts within s-toasts component.

ToastData type

Name	Value	Required	Default	Description
`id`	string			Sets id of the toast.
`text`	string			Sets text content of the toast.
`details`	string or array			Sets details content of the toast. If the value is an array, the array elements will be rendered as a bulleted list.
`status`	"info" "success" "warning" "error"		"plain"	Sets status of the toast. If omitted, "plain" styling will be used.
`actionText`	string			Text for optional action button. Value must also be provided for actionHandler to render.
`actionHandler`	function			Handler for optional action button. Value must also be provided for actionText to render.

Events

Name	Detail	Description
`s-dismiss`	The dismissed toast's `id` is available on `e.detail`	Fired when a toast is dismissed.

Demo

API

Tag

Name
`<SToasts>`

Props

Name	Value	Required	Description
`i18n`	object		A JSON object which defines a list of localized strings. The keys must be one of the string IDs defined below.
`onS-dismiss`	Function		Handles the `s-dismiss` event fired when a toast is dismissed. The dismissed toast's `id` is available on `e.detail`.

Methods

Name	Description
`createToast(toastData)`	Call this method to create or update a toast element. See ToastData type reference below for details.
`getToast(toastId)`	Call this method to get a toast element by id.
`updateToast(toastId, toastData)`	Call this method to update a toast element by id with data matching ToastData type.
`dismissToast(toastId)`	Call this method to dismiss a toast element by its id.
`dismissAllToasts()`	Call this method on every major context change to dismiss all toasts within s-toasts component.

ToastData type

Name	Value	Required	Default	Description
`id`	string			Sets id of the toast.
`text`	string			Sets text content of the toast.
`details`	string or array			Sets details content of the toast. If the value is an array, the array elements will be rendered as a bulleted list.
`status`	"info" "success" "warning" "error"		"plain"	Sets status of the toast. If omitted, "plain" styling will be used.
`actionText`	string			Text for optional action button. Value must also be provided for actionHandler to render.
`actionHandler`	function			Handler for optional action button. Value must also be provided for actionText to render.

Skylab React links

General information about using our React package

Typescript

Exported types

// s-dismiss event's e.detail export type sToastDismissData = { id: string; };

i18n Strings

ID	Description	Default value
`"toasts.ariaLabel.dismiss"`	The aria-label used for the dismiss button.	Dismiss alert

Guidelines

Accessibility

Toasts are given role="status" to ensure messaging is announced on screenreaders.

Usage

The Toasts element can be included in standard layout if toasts are used in multiple UIs - regardless, the element must be present in the DOM in order to use the methods documented above. Sample usage is indicated below:

const toastData = \{ text: 'Your file was imported successfully.', id: 'file-import-success', status: 'success' } document.querySelector('s-toasts').createToast(toastData); document.querySelector('s-toasts').getToast('file-import-success'); document.querySelector('s-toasts').updateToast('file-import-success', \{ text: 'Your files have imported successfully' }); document.querySelector('s-toasts').dismissToast('file-import-success');

Update behavior

When calling the createToast method using the id of an existing toast, that toast will be updated with the provided toastData, rather than creating a new toast with a duplicate id. Alternatively, the updateToast method may be used to perform updates.

Dismiss behavior

All toasts are dismissible and contain a close button. On any major context change in the user interface, all existing toasts should be dismissed with the dismissAllToasts method. As part of the effort to ensure Skylab SDK meets accessibility compliance requirements, auto-dismissing toasts must not be used.

Design

Design resources can be found on the Skylab design documentation site: skylab.avalara.com