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

Basic toast notification

function render() {
  const onClick = () =>
    Toast.showToast({
      title: 'Feedback received',
      description: 'We will contact you soon.',
      actions: [
        {
          label: 'Go back',
          onClick: () => console.log('Go back'),
        },
      ],
      type: Toast.TYPE.NORMAL,
    });


  return <Button onClick={onClick}>Show toast</Button>;
}

With additional info link

function render() {
  const onClick = () =>
    Toast.showToast({
      title: 'TV Mode activated',
      description: 'Press ESC to exit',
      additionalInfoLink: {
        label: 'Learn more about TV Mode',
        to: 'https://discuss.newrelic.com/t/tv-mode-in-new-relic-one/92963',
      },
      type: Toast.TYPE.NORMAL,
    });


  return <Button onClick={onClick}>Show toast</Button>;
}

Critical toast notification

function render() {
  const onClick = () =>
    Toast.showToast({
      title: 'Service unavailable',
      description: 'Your data could not be retrieved',
      actions: [
        {
          label: 'Retry',
          onClick: () => console.log('Retry'),
        },
      ],
      type: Toast.TYPE.CRITICAL,
    });


  return <Button onClick={onClick}>Update</Button>;
}

Props

actions

shape[]

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

label

REQUIRED

string

onClick

REQUIRED

function

additionalInfoLink

shape

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

label

REQUIRED

string

onClick

function

Callback fired any time the user clicks on the button.

function (event: React.MouseEvent 
)

to

shape|string

Location object or url string to link to.

shape

pathname

REQUIRED

string

search

string

hash

string

className

string

Appends class names to the component.Should be used only for positioning and spacing purposes.

description

string

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.

onHideEnd

function

Callback executed after the toast is hidden.

onHideStart

function

Callback executed when the hide animation starts.

sticky

boolean

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.

style

object

Inline style for custom styling.Should be used only for positioning and spacing purposes.

testId

string

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.

title

REQUIRED

string

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.

type

enum

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

Usage.css-21sua1{background:none;border:none;width:0;padding:0;}

Examples

Basic toast notification

With additional info link

Critical toast notification

Props

shape[]

shape

REQUIRED

string

REQUIRED

function

shape

shape

REQUIRED

string

function

shape|string

shape

REQUIRED

string

string

string

string

string

function

function

boolean

object

string

REQUIRED

string

enum

Methods

Toast.showToast

Usage

`Toast.showToast`