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
`dismissible`	`dismissible`	Show a dismiss (×) button regardless of `duration`. The `toast` variant already shows one whenever `duration` is set; set this for a persistent banner the user can still close.	`boolean`	`false`
`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`
`heading`	`heading`	Bold heading shown above the message. Banner variant only.	`string`	`undefined`
`icon`	`icon`	Leading icon name (from the EBRAINS icon set). Banner variant only. Falls back to a sensible default per intent when omitted.	`string`	`undefined`
`intent`	`intent`	The visual intent or style of the toast, indicating the toast type.	`"brand" \| "brandInverse" \| "default" \| "error" \| "info" \| "neutral" \| "success" \| "warning"`	`'default'`
`message` (required)	`message`	The main message or text to be displayed in the toast.	`string`	`undefined`
`variant`	`variant`	Visual variant: - “toast”: the classic compact pill (message + close). Default; used by the global toast manager. - “banner”: a richer inline banner — leading icon in a tinted square, a bold heading over a mono message, a coloured left rail on a tinted surface, an optional actions slot and an optional dismiss button. Use for persistent, in-page status (form expiry, saved draft, etc.).	`"banner" \| "toast"`	`'toast'`

Events

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

Dependencies

Used by

eds-toast-manager

Depends on

Graph

graph TD;
  eds-toast --> eds-icon-wrapper
  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