# notification

{% hint style="info" %}
**Version Compatibility**

`notification` was introduced in version **4.23.0** of the JourneyApps Container.
{% endhint %}

The `notification` UI component displays a message in a top-level bar to the user. It automatically fades out after a few seconds. `notification` needs to be triggered from JavaScript/TypeScript.

### Example

{% code title="main.js" %}

```javascript
notification.success("Your changes were saved successfully");
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-5ee31aa8c0bb7fce3e969338ef3b426413b78994%2Fnotification-basic.png?alt=media)

### Notification types

| Type      | Note                                                                  | Color          |
| --------- | --------------------------------------------------------------------- | -------------- |
| `success` |                                                                       | Positive       |
| `error`   |                                                                       | Negative       |
| `info`    |                                                                       | Info           |
| `show`    | Generic type. Introduced in version 4.27 of the JourneyApps Container | Info (default) |

### Options

{% hint style="info" %}
**Version Compatibility**

`notification` supports options since version **4.27** of the JourneyApps Runtime.
{% endhint %}

####

Examples:

```javascript
var options = {
    timeout: 5 * 1000 // Display the notification for 5 seconds
};

notification.success("Your changes were saved successfully.", options);
```

```javascript
var options = {
    color: '#C0FFEE',
    timeout: null
};

notification.show("The job was submitted successfully", options);
```

`notification` supports an `options` object as a second parameter with the following valid keys:

| Key         | Description                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Example                                                                                   |
| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
| `color`     | <p>Background color of the notification. Can either be:</p><ul><li>a hex value</li><li>a named color</li></ul><p>Defaults to: <code>info</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | <p><code>color: "#C0FFEE"</code><br>or<br><code>color: "positive"</code></p>              |
| `textColor` | <p>The color the notification's text. Can either be:<br></p><ul><li>hex value</li><li>a named color</li></ul><p><br>Note that if <code>textColor</code> is omitted, it will resolve itself with the following rules:</p><ul><li>If the specified <code>color</code> is a named color, <code>textColor</code> is automatically set to that named color's text counterpart (e.g. <code>primary\_text</code> for <code>primary</code>).</li><li>If the specified <code>color</code> is a hex value, <code>textColor</code> is automatically set to <code>#333333</code> (dark) or <code>#FFFFFF</code> (light), whichever has the greatest contrast with the background color.</li></ul> | <p><code>textColor: "#333333"</code><br>or<br><code>textColor: "positive-text"</code></p> |
| `timeout`   | <p>The time (in milliseconds) before the notification disappears.<br><em>Note</em>: For no timeout (i.e. the notification displays until the user taps it or clicks on it), set <code>timeout</code> to <code>null</code>.<br>Defaults to:</p><ul><li><code>3000</code> (3 seconds) if no buttons are present</li><li><code>null</code> if buttons are present</li></ul>                                                                                                                                                                                                                                                                                                              | <p><code>timeout: 5000</code><br>or<br><code>timeout: null</code></p>                     |
| `position`  | <p>Screen placement of the notification banner on mobile. Can be one of "<code>top</code>" or "<code>bottom</code>"</p><p>Defaults to: "<code>bottom</code>" on mobile when omitted.<br><br><em>position is currently supported for mobile notification placement.</em><br></p><div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><code>position</code> was introduced in version <strong>5.0.3</strong> of the JourneyApps Runtime.</p></div>                                                                                                                                                                                                     | <p><code>position: "top"</code><br>or <br><code>position: "bottom"</code></p>             |
| `buttons`   | See section below                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |                                                                                           |

### Buttons

`notification` supports buttons in the notification bar.

A button is an object with the following structure:

```javascript
{
    label: "Button label here",
    onPress: function() {
        // Callback to execute when button is pressed
    }
}
```

To add buttons to the `notification`, add **one** or **an array of** the above object to the `buttons` property of the `options` object.

#### Examples:

2 buttons:

```javascript
var options = {
  buttons: [{
    label: "Later",
    onPress: function() {
      // Dismiss the notification
    }
  }, {
    label: "View",
    onPress: function() {
      // Go to "View"
    }
  }]
};

notification.info("You have received a new message", options);
```

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-80d5e1350d65afdb6abef63c866e502b3fc45045%2Fnotification-buttons.png?alt=media)

1 button:

```javascript
var options = {
    color: 'primary',
    buttons: [{
        label: "View",
        onPress: function() {
        // Go to "View"
        }
    }]
};

notification.show("You have received a new message", options);
```