Features

• ~1.91kb gzipped — microscopic footprint, lighter than your CSS reset.
• Zero dependencies — pure TypeScript, no frameworks required.
• 4 built-in types — success, error, info, warning.
• 6 positions — top/bottom × left/right/center.
• Global config — set defaults once, override per toast.
• Smart overloads — pass a string, two strings, or a full object.
• Progress bar — animated countdown (optional).
• Accessible — role="alert" and aria-live out of the box.
• XSS Secure — text injection is sanitized by default.
• Custom colors & icons — full control when you need it.

Installation

npm install notique
# or
pnpm add notique
# or
yarn add notique

Quick Start

import { notique } from 'notique';

notique.success('Payment processed successfully');
notique.error('Something went wrong');
notique.info('New update available');
notique.warning('Low battery');

Usage

Notique supports multiple call signatures. Use whichever fits your context.

1. String only

notique.success('Profile saved');

2. String + options

notique.warning('Low battery', { position: 'bottom-center', duration: 2000 });

3. String + description

notique.info('New update available', 'Version 2.4.0 is ready to install');

4. String + description + options

notique.success('Upload complete', '15 files uploaded successfully', {
  position: 'top-left',
  dismiss: false
});

5. Options object

notique.error({
  message: 'Network error',
  description: 'Could not connect to the server.',
  position: 'bottom-right',
  duration: 6000
});

Global Config

Set defaults once at your app's entry point. Per-toast options will always override the global config.

import { notique } from 'notique';

notique.config({
  position: 'top-center',
  duration: 4000,
  showProgress: false
});

Custom Theming

Notique automatically injects dynamic type classes (.notique-success, .notique-error, etc.) onto the toast container, making global CSS overrides effortless.

For example, to create a completely custom brutalist/dark theme:

/* 1. Reset default borders and shadows */
.notique {
  box-shadow: none;
  border-radius: 0;
}

/* 2. Theme specific types */
.notique-error {
  background-color: #1a1a1a !important; /* Overrides inline background */
  border: 1px solid #ef4444;
}

.notique-success {
  background-color: #1a1a1a !important;
  border: 1px solid #10b981;
}

Note: Because Notique applies a default background color via an inline style (style="background: #...") to ensure it works without external CSS, you must use !important when overriding the background-color.

API Reference

Methods

| Method | Description | |--------|-------------| | notique.success(...) | Green toast with check icon | | notique.error(...) | Red toast with error icon | | notique.info(...) | Blue toast with info icon | | notique.warning(...) | Yellow toast with alert icon | | notique.custom(...) | Custom toast (uses info style as base) | | notique.config(options) | Set global defaults |

Options

| Property | Type | Default | Description | |--------|------|---------|-------------| | message | string | — | Required. Toast title | | description | string | — | Optional subtitle | | type | 'success' \| 'error' \| 'info' \| 'warning' | inferred | Toast type | | position | 'top-right' \| 'top-left' \| 'bottom-right' \| 'bottom-left' \| 'top-center' \| 'bottom-center' | 'bottom-right' | Screen position | | duration | number | 3000 | Duration in ms | | dismiss | boolean | true | Click to dismiss | | showProgress | boolean | true | Show progress bar animation | | icon | string \| false | built-in SVG | Custom icon HTML or false to hide | | color | string | type default | Background color (hex, rgb, gradients) | | textColor | string | #fff | Text color | | className | string | — | Additional CSS utility classes (e.g., Tailwind) |

Framework Examples

Notique works natively with any framework.

Vanilla JS / TS

import { notique } from 'notique';
notique.success('Done!');

React / Next.js

import { notique } from 'notique';

export function SaveButton() {
  const handleSave = async () => {
    await save();
    notique.success('Saved!');
  };
  return <button onClick={handleSave}>Save</button>;
}

Angular

import { notique } from 'notique';
import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class NotificationService {
  success(msg: string) { notique.success(msg); }
  error(msg: string)   { notique.error(msg); }
}

Vue / Nuxt

<script setup>
import { notique } from 'notique';

const handleSubmit = async () => {
  await submit();
  notique.success('Form submitted');
}
</script>

License

MIT © Andrés Rengifo