Ui3nNotification

Notification component for displaying messages with different types and positions.

Props

Name	Type	Default	Description
id	string | undefined	—	Notification ID
type	"error" | "success" | "info" | "warning" | undefined	"info"	Notification type
content*	string	—	Notification content
position	"right" | "left" | "center" | undefined	"center"	Notification position
duration	number | undefined	0	Notification duration in milliseconds
withIcon	boolean | undefined	true	Whether to display icon
borderRadius	string | number | undefined	8	Notification border radius in pixels or css length
onOpen	(() => void) | undefined	() => { }	Called when notification opens
onClose	(() => void) | undefined	() => { }	Called when notification closes

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-notification-border-radius	8px
--ui3n-notification-font-size	12px
--ui3n-notification-icon-size	32px
--ui3n-notification-margin-bottom	4px
--ui3n-notification-padding	16px
--ui3n-notification-text-color	var(--default-content-default)
--ui3n-notification-width	380px

Usage Examples

Basic notification

Basic notification

Simple notification with default settings

Notification types

Notification types

Different notification types: success, warning, info, error

Operation completed successfully

Please review your input

Here is some useful information

An error occurred during processing

Custom border radius

Custom border radius

Customize border radius using the borderRadius prop (pixels or CSS length)

Square corners (borderRadius: 0)

Default radius (borderRadius: 8px)

Large radius (borderRadius: 16px)

Pill shape (borderRadius: 24px)

Auto-close notification

Auto-close notification

Notification that closes automatically after specified duration