• /
  • Log in

Toast

Toast notifications give users immediate confirmation of the successful completion of a task or critical failure in trying to complete a task.

You can customize the toast by passing custom actions which will show as clickable buttons next to the text.

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.

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

Static method to use Toast as a function instead of a React component.

function (
props: Object //

Object containing the Toast options. Any Toast prop is valid as an option.

) => undefined
Create issueEdit page
Copyright © 2021 New Relic Inc.