# @astrouxds/rux-notification
> Astro Web Component for notification banners
Latest version **5.3.0** (published 2021-10-21) · SEE LICENSE IN LICENSE.md license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install @astrouxds/rux-notification
pnpm add @astrouxds/rux-notification
yarn add @astrouxds/rux-notification
bun add @astrouxds/rux-notification
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 5.3.0 |
| Published | 2021-10-21 |
| First published | 2018-05-22 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE.md |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 11.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rocket Communications |
| Maintainers | jacob-rocket, dmcalester, joel_perez, rocketmark, sasha-rocket |
## Links
- npm: https://www.npmjs.com/package/@astrouxds/rux-notification
- Repository: https://github.com/RocketCommunicationsInc/astro-components/src/master
- Homepage: https://www.astrouxds.com
- Issues: https://github.com/RocketCommunicationsInc/astro-components/issues
- npm.io page: https://npm.io/package/@astrouxds/rux-notification
## Dependencies (3)
- [lit-element](https://npm.io/package/lit-element.md) ^2.1.0
- [@astrouxds/rux-icon](https://npm.io/package/@astrouxds/rux-icon.md) ^5.3.0
- [@webcomponents/webcomponentsjs](https://npm.io/package/@webcomponents/webcomponentsjs.md) ^2.2.10
## Recent versions
- 5.3.0 (latest) — 2021-10-21
- 2.0.0 (next) — 2018-08-30
- 5.0.1 — 2021-06-28
- 5.0.0 — 2021-01-26
- 4.0.5 — 2020-08-18
- 4.0.4 — 2020-05-12
- 4.0.3 — 2020-04-16
- 4.0.2 — 2019-08-13
- 4.0.1 — 2019-08-06
- 4.0.0 — 2019-08-06
- 3.0.0 — 2018-11-01
- 1.0.3 — 2018-05-23
- 1.0.2 — 2018-05-22
## README
# Notification Banner
Events that deserve user attention, but don’t require a response, may be displayed in a Notification Banner. The Banner displays within the user’s field-of-view, but doesn’t block other interaction.
If the user is currently working in a specific screen area, the Banner may be presented in that area. If the Notification is more general, or doesn’t relate to a specific area of the screen, it may be presented in the center of the screen just below the Global Status Bar.
If another Notification Banner is waiting, it appears when the current Banner is dismissed. Banners don’t stack or group.
## Guidelines
- [Astro UXDS: Notification Banner](https://www.astrouxds.com/ui-components/notification-banner)
## Web Components Usage
### 1. Installation
#### Install the Astro UXDS Notification Banner package via Command Line (Preferred Method)
The name of the package reflects its earlier history as Astro UXDS Modal.
```sh
npm i --save @astrouxds/rux-notification
```
You may use Yarn, NPM, or your Node package manager of choice. The `--save` flag adds this component as a dependency in your `package.json` file.
#### **Alternatively**, download the [Astro UXDS Component Library](https://github.com/RocketCommunicationsInc/astro-components/) source to your project.
Via CLI:
```sh
git clone https://github.com/RocketCommunicationsInc/astro-components.git
```
Or, [download the Astro UXDS Components as a .zip](https://github.com/RocketCommunicationsInc/astro-components/archive/master.zip)
### 2. Import the Astro Notification Banner Web Component
This example assumes you're using the NPM package in `node_modules`. Otherwise, import the component using the path to the Astro Components directory in your project.
```javascript
import { RuxNotification } from '@astrouxds/rux-notification/rux-notification.js'
```
### 3. Render the Astro Notification Banner Web Component
Pass properties as attributes of the Astro Notification Banner custom element. At a minimum, the component requires a message and the `open` attribute.
```xml
```
You can toggle the display of the banner via the `open` attribute, which begins the self-close behavior after the `close-after` duration.
```xml
```
#### ** Usage Note: **
The Astro UXDS Notification Banner hides from view using absolute positioning in CSS to slide up and outside of the parent element's content area. To ensure the notification hides properly, make sure the Notification Banner's parent element has both `position: relative` and `overflow: hidden` applied.
### Properties
| Property | Type | Default | Required | Description |
| ------------ | ------- | ----------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `open` | Boolean | `false` | Yes | Set to true to display the Banner and begin countdown to close (if a `close-after` Number value is provided). |
| `message` | String | `''` | Yes | Message for the notification banner. |
| `closeAfter` | Number | `2000` | No | If provided, the banner will automatically close after this amount of time. Accepts value either in milliseconds or seconds (which will be converted to milliseconds internally), between `2000` and `10000`, or `2` and `10`, respectively. Any number provided outside of the `2000`-`10000` range will be ignored in favor of the default 2000ms delay.
If `closeAfter` is not passed or if it is given an undefined or `null` value, the banner will stay open until the user closes it. |
| `status` | String | `'standby'` | No | The background color. Possible values include 'standby', 'normal', 'caution', and 'critical'. See [Astro UXDS Status System](https://astrouxds.com/patterns/status-system/). |
## Revision History
##### **4.0**
- Swapped kebab-cased `close-after` attribute for standard camelCase `closeAfter`
- Removed `target` property and associated work-arounds to enforce parent element positioning. Added language to direct users to apply `position: relative` and `overflow: hidden` CSS declarations to containing elements themselves.
- Enforced minimum 2000ms and maximum 10000ms close delay duration.
- Replaced [Polymer 3](https://www.polymer-project.org) implementation with [LitElement](https://lit-element.polymer-project.org/) for improved speed and interoperability with JS Frameworks as well as simpler template declaration now available in vanilla JavaScript.
---
_Source: https://npm.io/package/@astrouxds/rux-notification · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._