Indielayer UI - Vue.js 3 / Nuxt.js 3 UI Library with Tailwind CSS 4. ⚡️  Build and prototype fast web applications.

Indielayer
Indielayer UIIndielayer UI
UI
v2.1.0

Notifications

Toast-style feedback for success, warning, or error after an action. Use notifications for transient messages that should not block the page.

#
Usage

Basic example with common props.

#API

Notifications

props

Name
Description
Type
Default
Values
Required
color
Theme or CSS color used for the control accents.
String
primary
align
Horizontal placement of the toast stack (left or right).
String
right
leftright
position
Vertical placement of the toast stack (top or bottom).
String
bottom
bottomtop
timeout
Default auto-dismiss delay in milliseconds. Set 0 to keep until removed.
Number
3500
removable
Shows a dismiss control on each notification by default.
Boolean
true
pauseOnHover
Pauses the dismiss timer while the pointer hovers a notification.
Boolean
true
injectKey
Provide/inject key for notification helpers (log, info, success, warn, error).
Symbol
String
Symbol()
offset
Extra inset from the viewport edge in pixels.
String
Number
0

slots

Name
Description
default
App content that can inject notification helpers.

methods

Name
Description
log
Show a plain notification.
info
Show an info-styled notification.
success
Show a success-styled notification.
warn
Show a warning-styled notification.
warning
Alias of `warn`.
error
Show an error-styled notification.
modal
pagination