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.

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

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.

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

None

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

Deprecated Events

pfe-toast:open

Fires when a toast is manually openned.

Note: pfe-toast:open is deprecated.

Use open

Event Type:
unknown
pfe-toast:close

Fires when a toast is manually closed.

Note: pfe-toast:close is deprecated.

Use close

Event Type:
unknown

CSS Custom Properties

CSS Property Description Default
--pfe-toast--MaxWidth

Allows you to specify the maximum width of the component.

500px

--pfe-toast--MinWidth

Allows you to specify the minimum width of the component.

250px

--pfe-toast--Top

Allows you to customize the distance between the component and the top of its container.

50px

--pfe-toast--Right

Allows you to customize the distance between the component and the right of its container.

50px

CSS Shadow Parts

container

container for the toast element

content

container for the slotted content

close-button

the toast's close button