---
title: Toast
source: https://docs.newrelic.com/docs/new-relic-solutions/build-nr-ui/sdk-component/feedback/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

```jsx
import { Toast } from 'nr1'
```

### Examples

#### Basic toast notification

```jsx
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

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

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

#### Critical toast notification

```jsx
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` REQUIREDstring `onClick` REQUIREDfunction                                                              |
| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `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` REQUIREDstring `onClick` function Callback fired any time the user clicks on the button. `to` shape\|string Location object or url string to link to. shape `pathname` REQUIREDstring `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` REQUIREDstring     | 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 Toast.TYPE.CRITICAL, Toast.TYPE.NORMAL,                                                                                                                                                                                                                                                              |

### Methods

### `Toast.showToast`