Notifications

The design system provides three notification components for different use cases: alerts for inline messages, toasts for transient confirmations, and modals for blocking interactions that require user decisions.

Choosing the Right Pattern

Pattern	Component	Use When	Persistence	User Action Required
Alert	`eds-alert`	Contextual info, warnings, errors inline with content	Persistent until dismissed	Optional (dismissible)
Toast	`eds-toast`	Brief confirmations, status updates	Auto-dismiss or manual close	No
Modal	`eds-modal`	Critical decisions, confirmations, complex input	Until user responds	Yes

Alert

Inline, persistent messages that sit within the page content. Use for warnings, errors, success confirmations, and contextual information.

Intents

Intent	Use For	Background
`default`	General information	Grey
`warning`	Caution, review needed	Yellow
`error`	Failure, invalid input	Red
`success`	Confirmation, completed action	Green
`brand`	EBRAINS-branded messaging	Dark with green text
`info`	Alias for `default`	Grey

Basic Usage

Actions

Alerts support two types of actions:

Link — when pressable-url is set, renders an eds-link with intent="strong"
Button — when only pressable-label is set (no URL), renders an eds-button with intent="ghost"

Layout

Use direction="vertical" for alerts with longer messages or multiple actions:

Slot Content

For rich content with HTML markup, use the slot instead of the message prop:

Toast

Transient notifications that appear briefly and auto-dismiss. Use for non-critical confirmations that don’t require user action.

Intents

Intent	Use For
`default`	General confirmation
`success`	Action completed
`error`	Non-critical failure
`warning`	Caution notice
`brand`	Brand-styled (dark bg, green text)
`brandInverse`	Brand-styled (light bg, dark text)

Basic Usage

When to Use Toast vs Alert

Scenario	Use
“File uploaded successfully”	Toast — transient confirmation
“Your session will expire soon”	Alert — persistent warning needs attention
“Network error, retrying…”	Toast — temporary status
“Required field is missing”	Alert (inline) — needs user action
“Saved!”	Toast — brief acknowledgment
“This action cannot be undone”	Modal — blocking confirmation

Modal

Blocking overlays for critical interactions. The modal traps focus, locks body scroll, and requires the user to respond before continuing.

Sizes

Size	Width	Use For
`small`	500px	Simple confirmations, short messages
`medium`	700px	Forms, detailed content
`large`	900px	Complex layouts, data tables

Basic Usage

Position

Position	Description
`middle`	Centered vertically (default)
`top`	Aligned to top of viewport
`bottom`	Aligned to bottom of viewport

Accessibility

The modal automatically:

Traps focus within the modal content (Tab cycles through focusable elements)
Closes on Escape key press
Locks body scroll while open
Restores focus to the trigger element on close
Uses role="dialog" with aria-label

Best Practices

Don’t stack toasts — limit to 1-2 simultaneous toasts
Keep toast messages under 90 characters — they should be scannable
Use alerts for errors that need action — toasts auto-dismiss and can be missed
Don’t use modals for non-blocking info — use alerts or toasts instead
Always provide a dismiss path — modals must have a close button or cancel action
Match intent to severity — error for failures, warning for caution, success for confirmations
Combine patterns — show a toast after a modal confirmation (“Item deleted”), use an alert for persistent errors that need resolution

Component Reference

eds-alert — Inline notification component
eds-toast — Transient notification component
eds-modal — Dialog/overlay component
eds-feedback — Rating feedback component
eds-nps — Net Promoter Score component