📦 Installation
# NPM
npm install notifio
# CDN (Unpkg/JSDelivr)
<script src="https://unpkg.com/notifio@1.0.21/dist/notifio.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/notifio@1.0.21/dist/notifio.umd.js"></script>
# CDN (Unpkg/JSDelivr)
<script src="https://unpkg.com/notifio@1.0.21/dist/notifio.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/notifio@1.0.21/dist/notifio.umd.js"></script>
🎨 Style Variants with Full Features
Solid Style - Complete Examples
Light Style - Complete Examples
Outline Style - Complete Examples
// Style variants
notifio.solid('success', 'Solid notification');
notifio.light('error', 'Light notification');
notifio.outline('warning', 'Outline notification');
// Or with options
notifio.success('Title', { style: 'solid' });
notifio.error('Title', { style: 'light' });
notifio.warning('Title', { style: 'outline' });
⚙️ Advanced Options
With Title & Description
With Link Button
Custom Duration & Position
// Advanced options
notifio.success('Success!', {
title: 'Operation Complete',
description: 'Your data has been saved successfully.',
duration: 5000,
position: 'top-right',
closable: true,
linkButton: {
text: 'View Details',
url: '#',
onClick: () => console.log('Link clicked!')
}
});
📍 Position Demo
📚 API Reference
Methods
| Method | Description | Parameters |
|---|---|---|
notifio.success() |
Show success notification | title, options |
notifio.error() |
Show error notification | title, options |
notifio.warning() |
Show warning notification | title, options |
notifio.info() |
Show info notification | title, options |
notifio.neutral() |
Show neutral notification | title, options |
notifio.solid() |
Show solid style notification | type, title, options |
notifio.light() |
Show light style notification | type, title, options |
notifio.outline() |
Show outline style notification | type, title, options |
Options
| Option | Type | Default | Description |
|---|---|---|---|
title |
string | - | Notification title |
description |
string | - | Notification description |
duration |
number | 4000 | Auto-close duration in ms |
position |
string | 'top-right' | Notification position |
closable |
boolean | true | Show close button |
style |
string | 'solid' | Notification style (solid/light/outline) |
linkButton |
object | - | Link button configuration |
✨ Features
- Universal compatibility (Vue, React, Vanilla JS)
- TypeScript support
- Multiple notification types (success, error, warning, info, neutral)
- Three style variants (solid, light, outline)
- Six position options
- Customizable duration and auto-close
- Link buttons and custom actions
- Responsive design
- Accessibility support
- Modern design system integration