PatternFly Elements - Home PatternFly Elements

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

Do you feel toasted?

Biodiesel wolf franzen, jean shorts pabst lomo cloud bread gentrify cronut af migas vinyl four dollar toast scenester twee. Twee synth hammock hella activated charcoal keffiyeh, farm-to-table cray try-hard tofu fixie truffaut leggings actually. Tote bag poutine kale chips intelligentsia health goth, thundercats affogato tofu literally vegan umami slow-carb VHS chillwave.