Skip to main content

BwToast | bw-toast

Overview​

Toast are overlays that display a message to the user.

Usage​

Basic​

Show Card ToastOkCancel
document.querySelector('#toastButton')?.addEventListener('click', () => {
  document.querySelector("#toast")!.open = true
})
Try clicking me multiple times!
import { createToast } from 'bluewater';

document.querySelector('#toastButton')?.addEventListener('click', () => {
  const toast = createToast({
    header: 'Hello',
    message: 'This is a bar toast',
    variant: 'bar',
    position: "top-end"
  })
  toast.open = true
})

Properties​

PropertyAttributeDescriptionTypeDefault
durationdurationThe duration of the toastnumber3000
headerheaderThe header of the toaststringundefined
messagemessageThe message of the toaststringundefined
openopenWhether the toast is openbooleanfalse
typetypeThe type of toast to display"error" | "informational" | "instructional" | "success" | "warning"'informational'
variantvariantThe variant of the toast"bar" | "card"'card'

Events​

EventDescriptionType
readyEmitted when the component has completed it's first renderCustomEvent<any>
toastDismissEmitted when the toast is dismissedCustomEvent<{ role?: string; data?: any; }>
toastPresentEmitted when the toast is presentedCustomEvent<any>

Methods​

didDismiss() => Promise<OverlayData>​

Returns a promise that resolves when the toast is dismissed

Returns​

Type: Promise<OverlayData>

The data of the dismiss

dismiss(role?: string, data?: any) => Promise<void>​

Dismisses the toast

Parameters​

NameTypeDescription
rolestring- The role of the dismiss
dataany- The data of the dismiss

Returns​

Type: Promise<void>

present() => Promise<void>​

Presents the toast

Returns​

Type: Promise<void>

Slots​

SlotDescription
"buttons"Buttons go here
"content"Header and message

Shadow Parts​

PartDescription
"message"The message of the toast
"progress"

CSS Custom Properties​

NameDescription
--backgroundThe background color of the toast
--colorThe color of the toast

Dependencies​

Depends on​

Graph​

© 2025 United Systems & Software - All Rights Reserved.