Accessibility: Partial

Translations: Not Needed

Migration Guide: Full

Alert

Alert component for displaying important messages to users

Basic Usage

Title

Alert description

Vue

<template>
  <HLAlert
    title="Title"
    :actionOne="{
    text: 'Action 1',
    iconLeft: EyeIcon
  }"
    :actionTwo="{
    text: 'Action 2',
    iconRight: ArrowRightIcon
  }"
  >
    Alert description
  </HLAlert>
</template>
<script setup lang="ts">
  import { ArrowRightIcon, EyeIcon } from '@gohighlevel/ghl-icons/24/outline'
  import { HLAlert } from '@platform-ui/highrise'
</script>

Colors

Default Alert

Alert Content

Info Alert

Alert Content

Success Alert

Alert Content

Error Alert

Alert Content

Warning Alert

Alert Content

Gray Alert

Alert Content

Vue

<template>
  <HLAlert color="white" title="Default Alert" type="alert">Alert Content</HLAlert>
  <HLAlert color="blue" title="Info Alert" type="alert">Alert Content</HLAlert>
  <HLAlert color="green" title="Success Alert" type="alert">Alert Content</HLAlert>
  <HLAlert color="red" title="Error Alert" type="alert">Alert Content</HLAlert>
  <HLAlert color="orange" title="Warning Alert" type="alert">Alert Content</HLAlert>
  <HLAlert color="gray" title="Gray Alert" type="alert">Alert Content</HLAlert>
</template>
<script setup>
  import { HLAlert } from '@platform-ui/highrise'
</script>

With Actions

Alert with Actions

Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor

This is a link with icon

Vue

<template>
  <HLAlert
    title="Alert with Actions"
    :actionOne="{
    text: 'This is a button',
    iconLeft: EyeIcon,
    onActionClick: () => console.log('action one clicked')
  }"
    :actionTwo="{
    text: 'This is a link with icon',
    iconRight: ArrowRightIcon,
    link: 'https://www.example.com'
  }"
    type="alert"
  >
    Alert with action buttons
  </HLAlert>
</template>
<script setup>
  import { HLAlert } from '@platform-ui/highrise'
</script>

Auto Close

Auto Close Alert

This alert will close automatically after 30 seconds

Vue

<template>
  <HLAlert title="Auto Close Alert" :autoClose="30000"> This alert will close automatically after 30 seconds </HLAlert>
</template>
<script setup>
  import { HLAlert } from '@platform-ui/highrise'
</script>

Notification Example

useHLNotification will only work if parent component is wrapped with HLContentWrap

TypeScript

import { useHLNotification, HLAlert } from '@platform-ui/highrise'
import { h } from 'vue'
const notification = useHLNotification()
function openNotification() {
  const notificationInstance = notification.create({
    content: () =>
      h(
        HLAlert,
        {
          title: 'Notification',
          closable: true,
          id: 'test-alert',
          actionOne: {
            text: 'This is a button',
            onActionClick: () => {},
          },
          actionTwo: {
            text: 'This is a button with icon',
            disabled: false,
          },
          onClose: () => {
            console.log('onClose callback executed')
            notificationInstance.destroy()
          },
        },
        {
          default:
            'Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit',
        }
      ),
    duration: 5000,
  })
}

Notification with ghl-ui props usage example

<script setup lang="ts">
import { ArrowRightIcon, CheckVerified01Icon } from '@gohighlevel/ghl-icons/24/outline'
import { h, onBeforeUnmount, ref } from 'vue'
import { HLAlert, HLButton, transformNotificationOpts, useHLNotification } from '@platform-ui/highrise'

const notification = useHLNotification()
const notifRef = ref()
const oldOpts = {
  title: 'Custom object successfully updated',
  duration: 2000,
  type: 'success',
  action: () => h(HLButton, { id: 'dismiss-button', onClick: () => notifRef.value.destroy() }, { default: () => 'Dismiss' }),
  description: 'This is a description',
  content: 'This is a content',
  meta: 'This is a meta',
  avatar: () =>
    h(CheckVerified01Icon, {
      size: 'small',
      round: true,
      class: 'text-[#039855] bg-[#D1FADF] rounded-full border-box border-[6px] border-[#ECFDF3]',
    }),
}

function openNotification() {
  notifRef.value = notification.create(transformNotificationOpts(oldOpts))
}

onBeforeUnmount(() => notification.destroyAll())
</script>
<template>
  <HLButton @click="openNotification">Click me</HLButton>
</template>

Custom Notification Position Example

useHLNotification will only work if parent component is wrapped with HLContentWrap. HLNotificationProvider needs to be wrapped in a parent component. If HLNotificationProvider and useHLNotification are initialized in the same SFC, it will not work.

CustomNotification.vue

<script setup lang="ts">
import { HLNotificationProvider, HLModal, HLButton } from '@platform-ui/highrise'
import Container2 from './Container2.vue'
import { ref } from 'vue'

const showModal = ref(false)

const openModal = (value: boolean) => {
  showModal.value = value
}
</script>

<template>
  <HLNotificationProvider container-class="secondary-container" to="#notif-container" :max="2">
    <HLButton id="open-modal-button" @click="() => openModal(true)">Open Modal</HLButton>
    <HLModal
      id="notification-modal-container"
      :show="showModal"
      :mask-closable="true"
      :close-on-esc="true"
      class="notification-modal-container"
      @close="() => openModal(false)"
    >
      <div>
        <div>Hello</div>
      </div>
      <div id="notif-container" class="bg-red-500 h-96 w-full">
        <Container2 />
      </div>
    </HLModal>
  </HLNotificationProvider>
</template>
<style>
.secondary-container {
  position: absolute !important;
}
#notif-container {
  position: relative;
}
.notification-modal-container {
  width: 720px !important;
}
</style>

Container2.vue

<script setup lang="ts">
<script setup lang="ts">
import { HLAlert, useHLNotification } from '@platform-ui/highrise'
import { HLButton } from '@platform-ui/highrise'
import { ArrowRightIcon } from '@gohighlevel/ghl-icons/24/outline'
import { h } from 'vue'

const notification = useHLNotification()
let n;

const showNotification = () => {
  n = notification.create({
    content: () =>
      h(
        HLAlert,
        {
          title: 'Notification',
          closable: true,
          id: 'test-alert',
          actionOne: {
            text: 'This is a button',
            onActionClick: () => {
              console.log('action one callback executed')
            },
          },
          actionTwo: {
            text: 'This is a button with icon',
            link: 'https://www.facebook.com',
            iconRight: ArrowRightIcon as unknown as string,
            disabled: false,
          },
          onClose: () => {
            console.log('onClose callback executed')
            n.destroy()
          },
        },
        {
          default: () =>
            'Lorem ipsum dolor sit amet consectetur adipisicing elit Lorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elitLorem ipsum dolor sit amet consectetur adipisicing elit',
        }
      ),
    // duration: 5000,
  })
}

onBeforeUnmount(() => {
  if (n) {
    n.destroy()
  }
})
</script>
<template>
  <HLButton id="notification" class="m-4" @click="showNotification"> Show Notification </HLButton>
</template>

Imports

Alert

import { HLAlert } from '@platform-ui/highrise'

Notification

import { useHLNotification, HLAlert } from '@platform-ui/highrise'
import type { HLNotificationOptions } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string | undefined	undefined	Unique identifier for the alert
color	'white' | 'blue' | 'green' | 'red' | 'orange' | 'gray'	'white'	Color variant of the alert
closable	boolean	true	Whether the alert can be closed
title	string | undefined	undefined	Title text of the alert
role	string	'alert'	ARIA role for accessibility
autoClose	boolean | number	false	Auto close duration in milliseconds
actionOne	ActionProps | undefined	undefined	Primary action configuration
actionTwo	ActionProps | undefined	undefined	Secondary action configuration
width	string	undefined	Width of the alert
height	string	undefined	Height of the alert
maxHeight	string	undefined	Max height of the alert
maxWidth	string	540px	Max width of the alert
type	'alert' | 'notification'	'alert'	Type of the alert
content	string | undefined	undefined	Content of the alert

Types

ActionProps

interface ActionProps {
  text: string
  iconLeft?: Component
  iconRight?: Component
  link?: string
  disabled?: boolean
  loading?: boolean
  ariaLabel?: string
  onActionClick?: () => void
}

Slots

Name	Parameters	Description
default	undefined	Content text of the alert
icon	undefined	Icon of the alert

Emits

Name	Parameters	Description
@close	(id: string)	Emitted when alert is closed
@actionOne	(event: Event)	Emitted when primary action is clicked
@actionTwo	(event: Event)	Emitted when secondary action is clicked