• Log inStart now

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 of
Toast.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
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.