RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

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

See Notification.

Accessibility

• Set role="alert" (or role="status" for passive notices) so the message announces immediately, and point aria-labelledby at the heading text.
• Attach body copy or remediation steps through aria-describedby.
• Give dismiss buttons an aria-label that references the alert content (e.g., "Dismiss billing alert").

Imports

import { HLAlert } 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