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

A minimal alert with a title, description, and two actions.

Title

Alert description

<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 { HLAlert } from '@platform-ui/highrise'
import { ArrowRightIcon, EyeIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Colors

The color prop sets the alert's color variant: white, blue, green, red, orange, or gray.

Default Alert

Alert Content

Info Alert

Alert Content

Success Alert

Alert Content

Error Alert

Alert Content

Warning Alert

Alert Content

Gray Alert

Alert Content

<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 lang="ts">
import { HLAlert } from '@platform-ui/highrise'
</script>

Sizing

Four props control the alert's box. Each takes any CSS length string and maps straight to the corresponding CSS property.

Width and Max Width

By default an alert stretches to its container, stopping at maxWidth. Set width for a fixed size, or raise/lower maxWidth to change the ceiling.

Default

Stretches to the container, capped at the default 540px max-width.

width: 320px

A fixed width, regardless of the container.

maxWidth: 300px

Stretches to the container but never past 300px.

<template>
  <!-- Default: fills the container, capped at 540px -->
  <HLAlert id="alert-width-default" title="Default">Stretches to the container.</HLAlert>

  <!-- Fixed width -->
  <HLAlert id="alert-width-fixed" title="Fixed" width="320px">A fixed width.</HLAlert>

  <!-- Lower the ceiling instead of pinning the width -->
  <HLAlert id="alert-width-maxwidth" title="Capped" maxWidth="300px">Never wider than 300px.</HLAlert>
</template>

<script setup lang="ts">
import { HLAlert } from '@platform-ui/highrise'
</script>

Height and Max Height

An alert grows to fit its content. Use height to pin it to a fixed size, or maxHeight to stop it growing past a ceiling.

WARNING

Neither prop adds scrolling — the component sets no overflow rule. Content taller than height / maxHeight spills outside the alert's background rather than scrolling within it. Use these only when you know the content fits, or add your own overflow: auto to the alert's container.

height: 140px

A fixed height, so the box stays the same size whatever the content length.

maxHeight: 120px

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, voluptatum.

<template>
  <!-- Pin the height -->
  <HLAlert id="alert-height-fixed" title="Fixed height" height="140px" width="360px">
    The box stays this tall whatever the content.
  </HLAlert>

  <!-- Cap the height; content taller than this overflows the box -->
  <HLAlert id="alert-height-max" title="Capped height" maxHeight="120px" width="360px">
    A long message that exceeds the cap…
  </HLAlert>
</template>

<script setup lang="ts">
import { HLAlert } from '@platform-ui/highrise'
</script>

INFO

All four accept a full CSS length string, so %, rem, vh, and calc() work as well as px — e.g. width="100%" or maxHeight="50vh". Pass the unit; a bare number is not a valid CSS length and is ignored.

With Actions

The actionOne and actionTwo props add action buttons or links to the alert.

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

<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 lang="ts">
import { HLAlert } from '@platform-ui/highrise'
import { ArrowRightIcon, EyeIcon } from '@gohighlevel/ghl-icons/24/outline'
</script>

Auto Close

The autoClose prop dismisses the alert automatically after the given number of milliseconds.

Auto Close Alert

This alert will close automatically after 30 seconds

<template>
  <HLAlert title="Auto Close Alert" :autoClose="30000"> This alert will close automatically after 30 seconds </HLAlert>
</template>

<script setup lang="ts">
import { HLAlert } from '@platform-ui/highrise'
</script>

INFO

autoClose runs independently of closable, so an alert dismisses on its own even when closable is false. Auto-dismissal emits @close through the same path as a manual close, so both are indistinguishable to listeners. The timer pauses while the alert is hovered or focused and resumes on mouse-leave or blur.

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	var(--hr-alert-max-width)	Max width of the alert (CSS variable resolves to the token's default of 540px)
type	'alert' | 'notification'	'notification'	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