Toast

Usage

import { Toast } from 'nr1'

Examples

Props

actionsshape[]

If you have a specific action you need the user to choose from, then use the custom action component. We recommend limiting the use of multiple actions as this notification is meant to indicate to the user the success or failure of a task and not supposed to be used for leading the user to another task.

shape

labelrequiredstring

onClickrequiredfunction

additionalInfoLinkshape

The information shown in the title and description can be complemented/extended with a link to documentation. This link should only be used to provide contextual information and not as an Action.

shape

labelrequiredstring

onClickfunction

Callback fired any time the user clicks on the link.

function (event: React.MouseEvent 
)

toshape|string

Location object or url string to link to.

shape

pathnamerequiredstring

searchstring

hashstring

classNamestring

Appends class names to the component.

Should be used only for positioning and spacing purposes.

descriptionstring

We recommend providing a title and message to give context for the success or failure for the previous action taken. You may even use the message area to provide the user a link to access the object they just created in the system.

onHideEndfunction

Callback executed after the toast is hidden.

onHideStartfunction

Callback executed when the hide animation starts.

stickyboolean

DEFAULT

false

For tasks not requiring the explicit dismissal or viewing by a user, we recommend using a time-out toast notification so the message automatically disappears from the screen after a short period of time.

styleobject

Inline style for custom styling.

Should be used only for positioning and spacing purposes.

testIdstring

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.

For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.

For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

titlerequiredstring

We don’t recommend using the title only option as this does NOT provide a context for the user as to the task they just completed.

typeenum

DEFAULT

Toast.TYPE.NORMAL

Normal — when the system successfully completes the user’s task
Critical — when the system fails to complete the user’s task

<One ofToast.TYPE.CRITICAL,
Toast.TYPE.NORMAL,
>

Methods

`Toast.showToast`

function (props: Object Object containing the Toast options. Any Toast
prop is valid as an option.
) => undefined