# nylas-notification

Source: https://developer.nylas.com/docs/reference/ui/notification/

The `nylas-notification` component is a UI component that displays notifications.

## Overview

- **Tag**: `<nylas-notification>`
- **Encapsulation**: shadow

## Installation

### HTML / Web Component

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@nylas/web-elements/dist/cdn/nylas-web-elements/nylas-web-elements.esm.js"></script>
```

### React

```bash
npm install @nylas/react
```

## Usage

### HTML

```html
<nylas-notification></nylas-notification>
```

### React

```jsx
import { NylasNotification } from '@nylas/react';

export default function Example() {
  return <NylasNotification />;
}
```

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `allowedCategories` | `allowed-categories` | string[] | `['component', 'api', 'validation', 'invalid_session']` | No |  |
| `ttl` | `ttl` | "none" \| number | `5000` | No | The time-to-live for notifications in milliseconds. Set to 'none' to disable auto-dismissal. |

## Dependencies

This component uses the following child components:

- [`<warning-icon>`](/docs/reference/ui/warning-icon/)
- [`<close-icon>`](/docs/reference/ui/close-icon/)

## Used by

This component is used inside:

- [`<nylas-editor-tabs>`](/docs/reference/ui/editor-tabs/)
- [`<nylas-editor-tabs-group>`](/docs/reference/ui/editor-tabs-group/)
- [`<nylas-list-configurations>`](/docs/reference/ui/list-configurations/)
- [`<nylas-scheduling>`](/docs/reference/ui/scheduling/)