npm i @velkin/react
import { VuNotification } from "@velkin/react/notification";Tables match the member selected under Import.
| Prop | Type | Default | Description |
|---|---|---|---|
| position | VuNotificationPosition | "bottom-end" | Screen corner or center for the toast region. Default: `"bottom-end"`. |
| layout | VuNotificationLayout | "list" | List or stack presentation. Default: `"list"`. |
| variant | VuNotificationVariant | "flat" | Status surface recipe (`flat`|`soft`|`solid`|`bordered`). Default: `"flat"`. |
| notifications | NotificationItemInternal[] | [] | Current toast items. Default: `[]`. |
| defaultDuration | number | 4000 | Auto-dismiss ms when item duration is omitted; `0` disables. Default: `4000`. |
| visibleToasts | number | 3 | Collapsed stack layers shown before overflow. Default: `3`. |
| maxVisible | number | 5 | Max simultaneous toasts before oldest are dropped. Default: `5`. |
| removable | boolean | true | Shows per-toast dismiss controls. Default: `true`. |
| mergeDuplicates | boolean | false | Merges duplicate toasts and increments count. Default: `false`. |
| closeLabel | string | "" | Accessible name for dismiss; empty uses locale catalog. Default: `""`. |
| offset | string | "" | Viewport inset override (CSS length). Default: `""`. |
| gap | string | "" | List gap override (CSS length). Default: `""`. |
| withProgress | boolean | false | Shows auto-dismiss countdown bar on timed toasts. Default: `false`. |
| withPauseOnHover | boolean | false | Pauses auto-dismiss while the list is hovered. Default: `false`. |
| withPauseWhenHidden | boolean | true | Pauses auto-dismiss while the document is hidden. Default: `true`. |
| withExpandOnClick | boolean | false | Pins stack expansion after clicking the pile. Default: `false`. |
| withOverflowCount | boolean | false | Shows overflow count badge in stack layout. Default: `false`. |
| withSwipeDismiss | boolean | false | Enables swipe-to-dismiss on each toast. Default: `false`. |
| paused | boolean | false | Reflects when auto-dismiss timers are paused. Default: `false`. |
| Event | Detail | Description |
|---|---|---|
| vu-queue | VuNotificationQueueDetail | When a toast is queued. |
| vu-remove | VuNotificationRemoveDetail | When a toast is removed. |
| vu-clear-all | VuNotificationClearAllDetail | When all toasts are cleared. |
| Part | Description |
|---|---|
| base | Root wrapper. |
| anchor | Invisible viewport anchor for popover positioning. |
| panel | Popover panel listing toasts. |
| list | Vertical list or stack grid of toast items. |
| item | Individual toast surface. |
| media | Optional leading image. |
| row | Icon + text row. |
| icon | Leading status icon. |
| spinner | Loading indicator for promise toasts. |
| copy | Title and message column. |
| title | Toast title. |
| message | Toast body copy. |
| count | Duplicate merge badge. |
| action | Optional action button. |
| body | Custom toast body when `content` is provided. |
| close | Per-toast dismiss control. |
| progress | Auto-dismiss countdown bar. |
| overflow | Hidden-toast count badge in stack layout. |
| Method | Description |
|---|---|
| addNotification | - Queues a toast; returns its id. |
| updateNotification | - Patches an existing toast (promise flow). |
| removeNotification | - Dismisses a toast by id. |
| clearNotifications | - Dismisses every toast. |
| show | - Opens the popover when items exist. |
| hide | - Closes the popover. |
| Name | Definition |
|---|---|
| VuNotificationClearAllDetail | |
| VuNotificationLayout | |
| VuNotificationPosition | |
| VuNotificationQueueDetail | |
| VuNotificationRemoveDetail | |
| VuNotificationVariant | |