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.

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

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.

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".

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

pfe-toast:open

Fires when a toast is manually openned.

pfe-toast:close

Fires when a toast is manually closed.

Styling hooks

• Max width: Allows you to specify the maximum width of the component. Variable name: --pfe-toast--MaxWidth.
• Min width: Allows you to specify the minimum width of the component. Variable name: --pfe-toast--MinWidth.
• Top: Allows you to customize the distance between the component and the top of its container. Variable name: --pfe-toast--Top.
• Right: Allows you to customize the distance between the component and the right of its container. Variable name: --pfe-toast--Right.