ONotif

ONotif is the application viewport for stacked, dismissible notifications created with useOokoNotif.

Usage

Step by step

1. Install the full Ooko plugin and render one <ONotif /> near the root of the application.
2. Call useOokoNotif() in a descendant component.
3. Use info, success, warning, or danger with a message and one of the six supported viewport positions.

Example

The rendered example and its source come from the same Vue single-file component.

Interactive playground

Change the variant, position, content, and duration, then create a notification.

Variant infosuccesswarningdanger Position top-starttoptop-endbottom-startbottombottom-end Title Message Duration (ms)

Props

Prop	Type	Default	Description
closeLabel	string	"Dismiss notification"	Accessible label applied to every notification close button.
glass	boolean	false	Draws translucent, blurred notifications whose tone shows only in the icon and progress bar. Defaults to the app's glass option.

Events

Event	Payload	Description
close	number	Emitted after a notification is dismissed by the viewport.

Slots

Slot	Props	Description
none	none	No slots are exposed.

Related types

Type	Definition
OokoNotif	interface OokoNotif { /** Stable identifier returned when the notification is created. */ id: number; /** Semantic treatment applied to the notification. */ variant: OokoNotifVariant; /** Optional title displayed above the message. */ title?: string; /** Main text announced to assistive technologies. */ message: string; /** Time in milliseconds before the notification closes, or null to keep it visible. */ duration: number | null; /** Viewport position used to group and stack the notification. */ position: OokoNotifPosition; }
OokoNotifController	interface OokoNotifController { /** Readonly notifications currently displayed by the viewport. */ notifications: Readonly<Ref<readonly OokoNotif[]>>; /** Creates a notification with an explicit semantic variant. */ show: (variant: OokoNotifVariant, options: OokoNotifOptions) => number; /** Creates an informational notification. */ info: (options: OokoNotifVariantOptions) => number; /** Creates a success notification. */ success: (options: OokoNotifVariantOptions) => number; /** Creates a warning notification. */ warning: (options: OokoNotifVariantOptions) => number; /** Creates a danger notification. */ danger: (options: OokoNotifVariantOptions) => number; /** Removes a notification by its identifier. */ close: (id: number) => void; }
OokoNotifOptions	interface OokoNotifOptions { /** Optional title displayed above the message. */ title?: string; /** Main text announced to assistive technologies. */ message: string; /** Time in milliseconds before the notification closes. Defaults to 5000. Use nullto keep it visible. */ duration?: number | null; /** Viewport position used to group and stack the notification. Defaults tobottom-end. */ position?: OokoNotifPosition; }
OokoNotifPosition	type OokoNotifPosition = "top-start" | "top" | "top-end" | "bottom-start" | "bottom" | "bottom-end";
OokoNotifVariant	type OokoNotifVariant = "info" | "success" | "warning" | "danger";
OokoNotifVariantOptions	type OokoNotifVariantOptions = OokoNotifOptions;
UseOokoNotifReturn	type UseOokoNotifReturn = OokoNotifController;

CSS custom properties

Custom property	Default	Description
--o-notif-viewport-offset	var(--o-space-5)	Sets the viewport offset from the screen edges.
--o-notif-width	22rem	Sets the maximum inline size of a notification.
--o-notif-gap	var(--o-space-3)	Sets the spacing between stacked notifications.
--o-notif-padding	var(--o-space-4)	Sets the inner spacing of a notification.
--o-notif-border-radius	var(--o-radius-surface)	Sets the notification corner radius.
--o-notif-close-size	1.75rem	Sets the close button size; its icon scales with this value.
--o-notif-progress-height	0.25rem	Sets the thickness of the remaining-duration indicator.
--o-notif-z-index	1100	Sets the stacking order of the notification viewports, above dialog and drawer overlays.
--o-notif-glass-background	var(--o-background-glass-strong)	Sets the translucent background of a glass notification.
--o-notif-glass-border	1px solid var(--o-border-glass)	Sets the border shorthand of a glass notification.
--o-notif-glass-backdrop-filter	var(--o-backdrop-filter-glass)	Sets the filter applied to the content behind a glass notification.

Override example

:root {
  --o-notif-width: 26rem;
  --o-notif-viewport-offset: var(--o-space-8);
  --o-notif-progress-height: 0.375rem;
}

Define the same custom properties on an application container to limit an override to one part of an application.

Accessibility

• Each notification uses role="status" with polite, atomic announcements.
• The viewport does not move focus; its close control is a native, named button.
• Timed notifications pause while the pointer is over them or focus is inside them.
• Timed notifications show a bottom progress bar that animates smoothly as the remaining duration decreases; persistent notifications do not show this indicator.
• Motion is removed when the user requests reduced motion, and forced-colors mode retains a visible system-color border.

Behavior and edge cases

• duration is expressed in milliseconds and defaults to 5000; set it to null to keep a notification visible until it is closed.
• Notifications in the same position remain visible and stack together. Notifications in other positions have independent stacks.
• glass draws translucent, blurred notifications with a thin neutral border and default text; the tone stays on the icon, whose shape also differs per variant, and on the progress bar. It follows the app's glass option unless set on ONotif, and the --o-notif-glass-* properties tune it.
• Notifications stack above dialog and drawer overlays, so a notification raised from a dialog stays visible and can be dismissed; --o-notif-z-index sets that order.
• Supported positions are top-start, top, top-end, bottom-start, bottom, and bottom-end; no middle-screen position exists.
• The Ooko plugin creates one controller for each Vue application. useOokoNotif() and ONotif require that plugin so application instances and SSR requests remain isolated.