Notification

The Notification component triggers a toast message using the internaltoast() API. It supports icons, avatars, actions, and color variants.

Basic Notification

Default notification with title and description triggered by a button.

With Avatar

Displays an avatar image as the notification icon for personalized messages.

Variants

Different visual styles for the toast notification.

With Action

Add a clickable action button inside the toast notification.

With Badge

You can add a badge to the trigger button, for example to show a count.

Props

Available properties for Notification.

  • title: string — The notification’s main title.
  • description?: string — Optional text displayed under the title.
  • icon?: ReactNode — Optional icon displayed in the toast.
  • avatarUrl?: string — Optional avatar image to display instead of an icon.
  • badge?: ReactNode | string — Optional badge next to the trigger button.
  • triggerLabel?: ReactNode — Label for the trigger button.
  • color?: 'default' | 'primary' | 'info' | 'success' | 'warning' | 'error' — Color theme of the notification.
  • variant?: 'filled' | 'outlined' | 'soft' | 'ghost' — Visual style of the toast.
  • actionLabel?: string — Optional label for the toast action button.
  • onAction?: () => void — Function executed when the action is clicked.