Default icon names mapped to each variant. Used when no explicit iconName is provided. / const variantIconMap:...

Default icon names mapped to each variant. Used when no explicit iconName is provided. / const variantIconMap: Record<string, string> = { success: 'check', warning: 'warning', error: 'error' }; const defaultIconName = 'info'; /** A toast notification component for brief, non-intrusive feedback messages. Toasts appear at the viewport edge (typically bottom-start) and auto-dismiss or via close button. Semantically similar to alerts but positioned absolutely for temporary notifications. Use toasts to: - Confirm successful actions (copy, save, submit) - Show transient status messages (connecting, uploading) - Notify of background activities without blocking content - Provide brief feedback that doesn't require user action Variants (success, warning, error) auto-select appropriate icons and colors. Position property controls viewport alignment (bottom-start default, bottom-end available). Dismissible via callback or timeout; onDismiss callback adds a close button. Role: Uses role="alert" for screen reader announcement of transient messages.

<ed-toast></ed-toast>

Properties

Name Type Default Description
iconName String string Default icon names mapped to each variant. Used when no explicit iconName is provided. / const variantIconMap: Record<string, string> = { success: 'check', warning: 'warning', error: 'error' }; const defaultIconName = 'info'; /** A toast notification component for brief, non-intrusive feedback messages. Toasts appear at the viewport edge (typically bottom-start) and auto-dismiss or via close button. Semantically similar to alerts but positioned absolutely for temporary notifications. Use toasts to: - Confirm successful actions (copy, save, submit) - Show transient status messages (connecting, uploading) - Notify of background activities without blocking content - Provide brief feedback that doesn't require user action Variants (success, warning, error) auto-select appropriate icons and colors. Position property controls viewport alignment (bottom-start default, bottom-end available). Dismissible via callback or timeout; onDismiss callback adds a close button. Role: Uses role="alert" for screen reader announcement of transient messages. / export class EdToast extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** Icon name used for the icon next to the text 1) When not set, the icon is automatically determined by the variant (info for default, check for success, warning for warning, error for error) 2) Set to override the default variant icon
headingVariant String 'headline-lg' | 'headline' | 'headline-sm' | 'title-lg' | 'title' | 'title-sm' = 'title-sm' Heading variant <ed-text-passage size="sm"> <ul> <li>**headline-lg** renders a heading with the heading headline-lg preset treatment</li> <li>**headline** renders a heading with the heading headline preset treatment</li> <li>**headline-sm** renders a heading with the heading headline-sm preset treatment</li> <li>**title-lg** renders a heading with the heading title-lg preset treatment</li> <li>**title** renders a heading with the heading title preset treatment</li> <li>**title-sm** renders a heading with the heading title-sm preset treatment</li> </ul> </ed-text-passage>
tagName String 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2' Dynamic tag name for the heading element 1) This is needed to use proper semantic heading treatments depending on where the toast lives on the page <ed-text-passage size="sm"> <ul> <li>**h1** renders an `h1` tag</li> <li>**h2** renders an `h2` tag. This is the default</li> <li>**h3** renders an `h3` tag</li> <li>**h4** renders an `h4` tag</li> <li>**h5** renders an `h5` tag</li> <li>**h6** renders an `h6` tag</li> </ul> </ed-text-passage>
heading String string Text for the toast heading
dismissed Boolean boolean Dismissed property 1) State that changes to true when the toast is dismissed
variant String 'success' | 'error' | 'warning' Style variants <ed-text-passage size="sm"> <ul> <li>**success** Confirms a completed action (saved, sent, published)</li> <li>**warning** Warns about a non-blocking issue requiring awareness</li> <li>**error** Reports a failure or problem that needs attention</li> </ul> </ed-text-passage>
position String 'bottom-start' | 'bottom-end' = 'bottom-start' Position of the toast on the viewport <ed-text-passage size="sm"> <ul> <li>**bottom-start** positions the toast at the bottom-start of the viewport (default)</li> <li>**bottom-end** positions the toast at the bottom-end of the viewport</li> </ul> </ed-text-passage>
onDismiss String () => void Callback fired when the dismiss button is clicked 1) When provided, a close button is rendered in the toast 2) When not provided, the toast is not dismissible

Slots

Name Description
- Toast message content

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/toast/toast.ts