eds-toast

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out this practical implementation of component.

Plain HTML

In React and Vue

Properties

Property	Attribute	Description	Type	Default
`duration`	`duration`	Determines the duration before the toast auto-dismisses (in milliseconds). If set, the toast will auto-dismiss and show a close button. If not set (or set to 0), it will persist without a close button.	`number`	`undefined`
`intent`	`intent`	The visual intent or style of the toast, indicating the toast type.	`"brand" \| "brandInverse" \| "default" \| "error" \| "success" \| "warning"`	`'default'`
`message` (required)	`message`	The main message or text to be displayed in the toast.	`string`	`undefined`

Events

Event	Description	Type
`toast`		`CustomEvent<{ visible: boolean; label: "dismissed" \| "shown"; }>`

Dependencies

Used by

eds-toast-manager

Depends on

eds-button

Graph

graph TD;
  eds-toast --> eds-button
  eds-button --> eds-icon-wrapper
  eds-toast-manager --> eds-toast
  style eds-toast fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS