Toast

Overview

Toast is a self-contained alert that is hidden on page load and slides in/out of the view when programmatically opened/closed.

Toast is a self-contained alert that is hidden on page load and slides in/out of the view when programmatically opened/closed.

Installation

npm install @patternfly/pfe-toast

Usage

  <pfe-toast>
    <p>You've been successfully toasted!</p>
  </pfe-toast>

const toast = document.querySelector("pfe-toast");
toast.open(); // open pfe-toast
toast.close(); // close pfe-toast
toast.toggle(); // toggle pfe-toast

Slots

Default Slot

The default slot can contain any type of content.

Attributes

auto-dismiss

This is an optional attribute string that you can provide to automatically dismiss the alert. The auto-dismiss delay value can be provided in seconds or in milliseconds. For example, auto-dismiss="3s" and auto-dismiss="3000ms" will dismiss the toast alert after three seconds.

If no delay value is provided, it will default to eight seconds.

DOM Property

autoDismiss

Type

string | undefined

Default

unknown

close-label

This is an optional attribute string that you can provide that sets the aria-label on the close button in the shadow DOM. The aria-label attribute will default to "Close".

DOM Property

closeLabel

Type

string

Default

'Close'

DOM Properties

Methods

open()

Manually opens a toast. Return the toast that has been opened.

document.querySelector("pfe-toast").open();

close()

Manually closes a toast. Returns the toast that has been closed.

document.querySelector("pfe-toast").close();

toggle()

Manually toggles a toast. Returns the toast that has been toggled.

document.querySelector("pfe-toast").toggle();

Events

open

Fires when a toast is manually openned.

Event Type:

unknown

close

Fires when a toast is manually closed.

Event Type:

unknown

CSS Custom Properties

CSS Shadow Parts

container

container for the toast element

content

container for the slotted content

close-button

the toast's close button