HyToast

A toast notification component for displaying transient messages with auto-dismiss.

Key Features:

• Multiple semantic variants (info, success, warning, danger)
• Auto-dismiss with configurable duration
• Pause timer on hover and window focus loss
• Optional dismiss button
• 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 toast is announced on updates
• Keyboard accessible dismiss button
• High contrast mode support
• Reduced motion support

Examples

Basic Usage

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

With Title

<hy-toast variant="info" open label="New Update"> A new version is available. </hy-toast>

Custom Duration

<hy-toast variant="warning" open duration="10000"> Session expiring in 5 minutes. </hy-toast>

Persistent Toast (no auto-dismiss)

<hy-toast variant="danger" open duration="0" dismissible>
  Connection lost. Please check your network.
</hy-toast>

With Action

<hy-toast variant="info" open>
  File deleted.
  <hy-button slot="action" size="small">Undo</hy-button>
</hy-toast>

Viewport Positioning (top-right corner)

<hy-toast variant="success" open anchor-vertical="top" anchor-horizontal="right">
  Settings saved successfully.
</hy-toast>

Viewport Positioning (bottom-center)

<hy-toast variant="info" open anchor-vertical="bottom" anchor-horizontal="center">
  New message received.
</hy-toast>

Events

• show - Fired when the toast becomes visible. Detail: { source: HyVisibilitySource }
• hide - Fired when the toast is hidden. Detail: { source: HyVisibilitySource }
• request-close - Fired before hiding; cancelable to prevent close. Detail: { source: HyVisibilitySource }

Slots

• default - The main toast message content
• title - Optional title displayed above the message (alternative to label prop)
• 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 toast programmatically.

hide()

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

Parameters:

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