HyAlert

Usage examples on this page are written for Lit / plain HTML (<hy-alert>). The same component ships as HyAlert in @whitespaceux/harmony-react (native React 19), with typed wrappers for Angular, Solid, Svelte, and Vue. The API reference below applies to all frameworks.

An alert component for displaying important messages to users with semantic variants.

Key Features:

• Multiple semantic variants (info, success, warning, danger)
• Optional dismiss button for closeable alerts
• Automatic variant-appropriate icons
• Custom icon support
• Action slot for buttons/links
• Accessible with proper ARIA live region attributes

Accessibility Features:

• Semantic ARIA roles (role="alert" for danger, role="status" for others)
• Visually-hidden variant labels announced by screen readers
• aria-atomic ensures entire alert is announced on updates
• Keyboard accessible dismiss button
• High contrast mode support
• Reduced motion support

Examples

Basic Usage

<hy-alert variant="info" open> This is an informational message. </hy-alert>

Dismissible Alert

<hy-alert variant="success" open dismissible> Your changes have been saved successfully. </hy-alert>

With Custom Icon

<hy-alert variant="warning" open icon="warning">
  Please review your input before continuing.
</hy-alert>

With Actions

<hy-alert variant="danger" open>
  <span slot="title">Error</span>
  Something went wrong. Please try again.
  <hy-button slot="action" size="small">Retry</hy-button>
</hy-alert>

Emphasis variants

<hy-alert variant="success" emphasis="solid" open>High-emphasis success</hy-alert>
<hy-alert variant="success" emphasis="soft" open>Default soft success</hy-alert>
<hy-alert variant="success" emphasis="outlined" open>Outlined success</hy-alert>

API

Properties

Property	Attribute	Type	Default	Description
variant	variant	'info' | 'success' | 'warning' | 'danger'	'info'	Visual style variant determining the alert's color scheme and semantic meaning.
emphasis	emphasis	'solid' | 'soft' | 'outlined'	'soft'	Visual chrome weight on top of the role.
dismissible	dismissible	boolean	false	Whether the alert can be dismissed by the user. When true, a close button is displayed.
open	open	boolean	false	Whether the alert is currently visible. Set to true to show the alert, false to hide it.
icon	icon	string | undefined	—	Icon name to display. If not provided, a variant-appropriate default icon is used. Set to empty string to hide the icon entirely.
label	label	string | undefined	—	Accessible label for the alert. Used for ARIA attributes.

Events

Event	Detail	Description
show	—	Fired when the alert becomes visible (does NOT bubble). Detail: { source: HyVisibilitySource }
hide	—	Fired when the alert is hidden (does NOT bubble). Detail: { source: HyVisibilitySource }
request-close	—	Fired before hiding; cancelable to prevent close (does NOT bubble). Detail: { source: HyVisibilitySource }

Slots

Slot	Description
default	The main alert message content
title	Optional title displayed above the message
icon	Custom icon to replace the default variant icon
action	Optional action buttons or links

CSS Parts

Part	Description
base	The alert's base wrapper element
icon	The icon container
content	The content wrapper (title + message)
title	The title element
message	The message element
action	The action slot container
close-button	The dismiss button (when dismissible)

CSS Custom Properties

Property	Description
--hy-alert-radius	Border radius of the alert
--hy-alert-padding	Padding inside the alert
--hy-alert-gap	Gap between alert elements
--hy-alert-gap-content	Gap within content area
--hy-alert-gap-title	Gap around the title
--hy-alert-action-background-info-tint-light	Slotted action's info hover / pressed tint (the button's background-info-tint-light hook, re-pointed inside the alert)
--hy-alert-action-background-info-tint-strong	Slotted action's info pressed tint (the button's background-info-tint-strong hook, re-pointed inside the alert)
--hy-alert-action-background-success-tint-light	Slotted action's success hover / pressed tint (the button's background-success-tint-light hook, re-pointed inside the alert)
--hy-alert-action-background-success-tint-strong	Slotted action's success pressed tint (the button's background-success-tint-strong hook, re-pointed inside the alert)
--hy-alert-action-background-warning-tint-light	Slotted action's warning hover / pressed tint (the button's background-warning-tint-light hook, re-pointed inside the alert)
--hy-alert-action-background-warning-tint-strong	Slotted action's warning pressed tint (the button's background-warning-tint-strong hook, re-pointed inside the alert)
--hy-alert-action-background-danger-tint-light	Slotted action's danger hover / pressed tint (the button's background-danger-tint-light hook, re-pointed inside the alert)
--hy-alert-action-background-danger-tint-strong	Slotted action's danger pressed tint (the button's background-danger-tint-strong hook, re-pointed inside the alert)
--hy-alert-stroke	Border width of the alert
--hy-alert-font-family	Font family override for alert message
--hy-alert-icon-size	Size of the alert icon

Methods

show()

Shows the alert programmatically.

hide()

Hides the alert programmatically. Emits a cancelable request-close event first.

Parameters:

• source - How the close was triggered (for event detail)