---
title: "notification"
description: "Version Compatibility"
permalink: /docs/build/ui-components/all-ui-components/notification/
---
# notification
`notification` was introduced in version **4.23.0** of the JourneyApps Container.
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
**main.js**
```javascript
notification.success("Your changes were saved successfully");
```
### 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
`notification` supports options since version **4.27** of the JourneyApps Runtime.
#### 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` | Background color of the notification. Can be a hex value or a named color.
Defaults to `info`. | `color: "#C0FFEE"` or `color: "positive"` |
| `textColor` | The color of the notification's text. Can be a hex value or a named color. If `textColor` is omitted, it resolves automatically: if `color` is a named color, `textColor` is set to that named color's text counterpart (for example, `primary-text` for `primary`); if `color` is a hex value, `textColor` is set to `#333333` (dark) or `#FFFFFF` (light), whichever has the greatest contrast with the background color. | `textColor: "#333333"` or `textColor: "positive-text"` |
| `timeout` | The time (in milliseconds) before the notification disappears. *Note*: For no timeout (i.e. the notification displays until the user taps it or clicks on it), set `timeout` to `null`. Defaults to `3000` (3 seconds) if no buttons are present, or `null` if buttons are present. | `timeout: 5000` or `timeout: null` |
| `position` | Screen placement of the notification banner. Can be `top` or `bottom`. Defaults to `bottom` when omitted.
`position` is supported on mobile notifications since version **5.0.3** and on desktop notifications since version **5.1.3** of the JourneyApps Runtime. | `position: "top"` or `position: "bottom"` |
| `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);
```
1 button:
```javascript
var options = {
color: 'primary',
buttons: [{
label: "View",
onPress: function() {
// Go to "View"
}
}]
};
notification.show("You have received a new message", options);
```