# @dbp-toolkit/notification

> You can install this component via npm:

Latest version **0.3.9** (published 2026-04-01) · LGPL-2.1-or-later license · 0 weekly downloads

## Install

```sh
npm install @dbp-toolkit/notification
pnpm add @dbp-toolkit/notification
yarn add @dbp-toolkit/notification
bun add @dbp-toolkit/notification
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; high maintenance score.

Warnings: low downloads; no types; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.3.9 |
| Published | 2026-04-01 |
| First published | 2020-12-21 |
| Weekly downloads | 0 |
| License | LGPL-2.1-or-later |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 1.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 5 |
| Maintainers | lazka, pbek, dbp-deploy |

## Links

- npm: https://www.npmjs.com/package/@dbp-toolkit/notification
- Repository: https://github.com/digital-blueprint/toolkit
- Homepage: https://github.com/digital-blueprint/toolkit/tree/main/packages/notification
- Issues: https://github.com/digital-blueprint/toolkit/issues
- npm.io page: https://npm.io/package/@dbp-toolkit/notification

## Dependencies (2)

- [lit](https://npm.io/package/lit.md) ^3.0.0
- [@dbp-toolkit/common](https://npm.io/package/@dbp-toolkit/common.md) ^0.3.18

## Recent versions

- 0.3.9 (latest) — 2026-04-01
- 0.3.8 — 2025-10-07
- 0.3.7 — 2025-09-19
- 0.3.6 — 2025-01-21
- 0.3.5 — 2025-01-09
- 0.3.4 — 2025-01-09
- 0.3.3 — 2024-06-12
- 0.3.2 — 2023-03-03
- 0.3.1 — 2022-06-23
- 0.3.0 — 2022-04-05
- 0.2.3 — 2021-06-16
- 0.2.2 — 2021-02-22
- 0.2.1 — 2021-02-17
- 0.2.0 — 2021-02-10
- 0.1.4 — 2021-01-27
- … 4 more at https://npm.io/package/@dbp-toolkit/notification/versions

## README

## Notification Web Component

You can install this component via npm:

```bash
npm i @dbp-toolkit/notification
```

### Usage

```html
<dbp-notification></dbp-notification>
<script
    type="module"
    src="node_modules/@dbp-toolkit/notification/dist/dbp-notification.js"></script>
```

Or directly via CDN:

```html
<dbp-notification></dbp-notification>
<script
    type="module"
    src="https://unpkg.com/@dbp-toolkit/notification@0.2.2/dist/dbp-notification.js"></script>
```

### Attributes

- `lang` (optional, default: `de`): set to `de` or `en` for German or English
    - example `<dbp-notification lang="de" client-id="my-client-id"></dbp-notification>`

### Sending notifications

```javascript
import { sendNotification } from '@dbp-toolkit/common';

...
async <your_function_name>(event) {
    sendNotification({
        "summary": "Item deleted",
        "body": "Item foo was deleted!",
        "type": "info",
        "icon": "download",             // optional - name of the icon
        "replaceId": "download-event",  // optional - if set, the notification with this id will be replaced
        "timeout": 5,                   // optional - if set, the notification will be removed after this time in seconds
    });
}
...

render() {
        let loggedIn = this.auth && this.auth.token;
        let i18n = this._i18n;

        return html`
            ...
            <button id="send-button" @click="${this.<your_function_name>}" class ="button">
                ${i18n.t('<your_text>')}
            </button>
            ...
        `
}
```

### Local development

```bash
# get the source
git clone git@github.com:digital-blueprint/toolkit.git
cd toolkit/packages/notification

# install dependencies
npm install

# constantly build dist/bundle.js and run a local web-server on port 8002
npm run watch

# run tests
npm test

# build local packages in dist directory
npm run build
```

Jump to <http://localhost:8002> and you should get a demo page.

---
_Source: https://npm.io/package/@dbp-toolkit/notification · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._