HyAlert

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>

Events

• 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

• 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

Methods

updated()

Single source of truth: all side effects for property changes happen here.

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)