UINotification

UINotification

A notification component for displaying global messages.

<template>
  <UIButton @click="showNotification">Show Notification</UIButton>
</template>

<script setup lang="ts">
import { useNotification } from '@gohighlevel/ghl-ui'

const notification = useNotification()

const showNotification = () => {
  notification.success({
    title: 'Success',
    content: 'Operation completed successfully',
    duration: 4500,
    placement: 'topRight',
    closable: true,
    onClose: () => {
      console.log('Notification closed')
    }
  })
}
</script>

Methods

• success(config): Show success notification
• error(config): Show error notification
• info(config): Show info notification
• warning(config): Show warning notification
• open(config): Show custom notification
• close(key: string): Close notification by key
• destroy(): Close all notifications

Config Options

• title (string): Notification title
• content (string | VNode): Notification content
• duration (number): Display duration in milliseconds
• placement (‘topLeft’ | ‘topRight’ | ‘bottomLeft’ | ‘bottomRight’): Position
• closable (boolean): Show close button
• closeIcon (VNode): Custom close icon
• icon (VNode): Custom notification icon
• key (string): Unique identifier
• class (string): Custom class name
• style (object): Custom style object
• onClick (function): Click callback
• onClose (function): Close callback

Slots (when used as component)

• icon: Custom icon content
• title: Custom title content
• default: Custom content
• action: Custom action content