Skip to main content

Notification API

Properties
NameTypeDefaultDescription
type"default" | "info" | "success" | "warning" | "danger" | "loading""default"Controls the color and icon of the notification.
iconstringOverrides the default icon for the notification type.
colorstringCustom color for the title and icon. Accepts named colors (e.g. 'info') or base color with shade (e.g. 'blue-400'). Only applies when type is 'default'.
closablebooleanfalseShows a close button. Once closed, the notification will not appear again.
autoclosebooleanfalseAutomatically dismisses the notification. Remaining time is shown by a progress indicator.
keystringUnique identifier for persisting the closed state. In Vue, use :key.prop="'somekey'" because key is reserved.
JavaScript API
NameKindDescription
close()actionCloses the notification.
Events
EventDescriptionReturns
appearFires when the component is rendered.{ detail: { component } }
closeFires when the notification is closed.