Toast Notification

WCAG Toast Notification

The <toast-notification> is an accessible, customizable notification component designed to display brief messages, following WCAG standards for accessibility. It includes ARIA attributes for assistive technologies and allows for flexible positioning.

Properties

Attributes

  • Name
    message
    Type
    string
    Description

    Sets the content of the toast message.

  • Name
    position
    Type
    string
    Description

    Determines the toast's position on the screen. Options include 'right', 'left', or 'center'.

  • Name
    visible
    Type
    boolean
    Description

    Controls the visibility of the toast. When true, the toast is visible; when false, it is hidden.

Usage

To use the <toast-notification>, include it in your HTML and control its visibility and message content with JavaScript. 

    
        <toast-notification id="myToast" message="This is a toast notification" position="right"></toast-notification>
        <button onclick="document.getElementById('myToast').show('Toast message displayed!')">Show Toast</button>

Methods

show(message: string)

Displays the toast with the provided message.

dismiss()

Hides the toast.

Styling

The <toast-notification> component uses external CSS for styling. Customize the appearance of the toast in wcag-toast-notification.css.

Response

                                
        <toast-notification id="myToast" message="This is a toast notification" position="right"></toast-notification>
        <button onclick="document.getElementById('myToast').show('Toast message displayed!')">Show Toast</button>