Notification
Notifications are used to provide feedback to the user. They communicate information about activities, processes, and events in the application.
new tab
import { html, LitElement } from 'lit';
import '@vaadin/notification';
import { applyTheme } from 'Frontend/generated/theme';
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card slot="middle">
Financial report generated
</vaadin-notification-card>
`;
}
}
new tab
const notification = Notification.show('Financial report generated', {
position: 'middle',
});
Theme Variants
Success
The success
theme variant can be used to display success messages, such as when a task or operation is completed.
new tab
import { html, LitElement } from 'lit';
import '@vaadin/notification';
import { applyTheme } from 'Frontend/generated/theme';
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card theme="success" slot="middle">
Application submitted!
</vaadin-notification-card>
`;
}
}
new tab
const notification = Notification.show('Application submitted!', {
position: 'middle',
});
notification.setAttribute('theme', 'success');
Successful operations shouldn’t routinely be declared using notifications, as these can be more distracting than useful for the user. Use success notifications only for operations whose successful completion may otherwise be difficult to discern.
Error
The error
theme variant can be used to display alerts, failures, or warnings.
new tab
import { html, LitElement } from 'lit';
import '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { applyTheme } from 'Frontend/generated/theme';
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card theme="error" slot="middle">
<vaadin-horizontal-layout theme="spacing" style="align-items: center;">
<div>Failed to generate report</div>
<vaadin-button theme="tertiary-inline">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
</vaadin-notification-card>
`;
}
}
new tab
<!-- The duration is set to 0-sec to prevent the notification from auto-close. -->
<vaadin-notification
theme="error"
duration="0"
position="middle"
.opened="${this.notificationOpened}"
@opened-changed="${(e: NotificationOpenedChangedEvent) => {
this.notificationOpened = e.detail.value;
}}"
${notificationRenderer(this.renderer, [])}
></vaadin-notification>
...
renderer: NotificationLitRenderer = () => html`
<vaadin-horizontal-layout theme="spacing" style="align-items: center;">
<div>Failed to generate report</div>
<vaadin-button theme="tertiary-inline" @click="${this.close}" aria-label="Close">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
`;
Error notifications should be persistent, and provide the user with a button that closes the notification and/or allows the user to take appropriate action.
Notifications are non-modal and can be ignored, making them inappropriate for displaying unexpected technical errors that prevent the application from functioning, or situations that require immediate user action. Use a modal Dialog in such situations.
Primary
The primary
theme variant can be used for important informational messages and/or to draw extra attention to a notification.
new tab
import { html, LitElement } from 'lit';
import '@vaadin/notification';
import { applyTheme } from 'Frontend/generated/theme';
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card theme="primary" slot="middle">
New project plan available
</vaadin-notification-card>
`;
}
}
new tab
const notification = Notification.show('New project plan available', {
position: 'middle',
});
notification.setAttribute('theme', 'primary');
Contrast
A high-contrast version that improves legibility and distinguishes the notification from the rest of the UI.
new tab
import { html, LitElement } from 'lit';
import '@vaadin/notification';
import { applyTheme } from 'Frontend/generated/theme';
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card theme="contrast" slot="middle">
5 tasks deleted
</vaadin-notification-card>
`;
}
}
new tab
const notification = Notification.show('5 tasks deleted', {
position: 'middle',
});
notification.setAttribute('theme', 'contrast');
Duration
By default, notifications stay on-screen for 5 seconds. The duration is in milliseconds, and should be based on content and importance:
Use short durations for notifications that have:
-
short text content
-
lesser importance (for example, operations that finished without errors)
-
no interactive elements
Use longer durations for notifications that have:
-
longer text content
-
higher importance (for example, errors)
-
interactive elements (for example, links or "undo" actions)
A duration of at least 5 seconds is recommended to ensure that the user has a chance to see and understand the notification.
Persistent Notifications
Setting the duration to zero disables auto-closing, keeping the notification visible until explicitly dismissed by the user. This should be used for notifications that provide vital information to the user, such as errors. Persistent notifications should contain a Button that closes the notification and/or allows the user to take appropriate action.
Less-important notifications shouldn’t be persistent, and instead disappear automatically after an appropriate delay.
Position
Notifications can be positioned in the viewport in seven non-stretched positions, or stretched across the top or bottom:
new tab
Use the position
attribute in HTML templates, for example <vaadin-notification position="top-end"></vaadin-notification>
.
protected override render() {
return html`
<vaadin-button @click="${this.show}">top-stretch</vaadin-button>
<vaadin-button @click="${this.show}">top-start</vaadin-button>
<vaadin-button @click="${this.show}">top-center</vaadin-button>
<vaadin-button @click="${this.show}">top-end</vaadin-button>
<vaadin-button @click="${this.show}">middle</vaadin-button>
<vaadin-button @click="${this.show}">bottom-start</vaadin-button>
<vaadin-button @click="${this.show}">bottom-center</vaadin-button>
<vaadin-button @click="${this.show}">bottom-end</vaadin-button>
<vaadin-button @click="${this.show}">bottom-stretch</vaadin-button>
`;
}
show(event: MouseEvent) {
// Use the button label as the location
const position = (event.target as HTMLElement).textContent as NotificationPosition;
Notification.show(position, { position });
}
Recommendations
-
Top End or Bottom Start are recommended for most notifications, as these are unobtrusive, but still noticeable.
-
Middle is the most disruptive position, and should be used only for important notifications, such as errors.
-
Bottom End is the least obtrusive position, but can go unnoticed.
-
Stretch notifications, which span the full width of the viewport, are more disruptive, and should be reserved for important notifications whose contents require more space.
-
Applications with a notification button or drop-down in the header or footer should position notifications to appear in the same part of the screen.
-
For a consistent user experience, use one or two positions throughout the application.
-
Avoid using positions that may obstruct important parts of the UI, such as navigation.
Note
|
The Flow styling issue
The Flow notification component renders rich content via an intermediate
|
Stacking
Multiple simultaneously displayed notifications are stacked vertically, depending on their positioning:
-
When using the bottom half of the screen as the position, a new notification appears below the older notifications.
-
With the position set to the top half, a new notification appears above the existing notifications.
Size
The notification card is automatically sized based on its content.
-
In large viewports, the card’s maximum width is one-third of the viewport.
-
In small viewports, the card always takes up the entire width of the viewport.
Interactive Elements
Notifications can contain interactive content, such as Buttons or links that allow the user to perform related actions.
For example, if an operation fails, the error notification could offer the user the opportunity to try again. Or it could contain a link to a view that allows the user to resolve the problem.
new tab
import { html, LitElement } from 'lit';
import '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { applyTheme } from 'Frontend/generated/theme';
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card theme="error" slot="middle">
<vaadin-horizontal-layout theme="spacing" style="align-items: center;">
<div>Failed to generate report</div>
<vaadin-button theme="tertiary-inline" style="margin-left: var(--lumo-space-xl);">
Retry
</vaadin-button>
<vaadin-button theme="tertiary-inline" aria-label="Close">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
</vaadin-notification-card>
`;
}
}
new tab
<!-- The duration is set to 0-sec to prevent the notification from auto-close. -->
<vaadin-notification
theme="error"
duration="0"
position="middle"
.opened="${this.notificationOpened}"
@opened-changed="${(e: NotificationOpenedChangedEvent) => {
this.notificationOpened = e.detail.value;
}}"
${notificationRenderer(this.renderer, [])}
></vaadin-notification>
...
renderer: NotificationLitRenderer = () => html`
<vaadin-horizontal-layout theme="spacing" style="align-items: center;">
<div>Failed to generate report</div>
<vaadin-button
theme="tertiary-inline"
style="margin-left: var(--lumo-space-xl);"
@click="${this.close}"
>
Retry
</vaadin-button>
<vaadin-button theme="tertiary-inline icon" @click="${this.close}" aria-label="Close">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
`;
In situations where the user might want to revert an action, display an "undo" button.
new tab
import { html, LitElement } from 'lit';
import '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { applyTheme } from 'Frontend/generated/theme';
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card theme="contrast" slot="middle">
<vaadin-horizontal-layout theme="spacing" style="align-items: center;">
<div>5 tasks deleted</div>
<vaadin-button theme="tertiary-inline" style="margin-left: var(--lumo-space-xl);">
Undo
</vaadin-button>
<vaadin-button theme="tertiary-inline" aria-label="Close">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
</vaadin-notification-card>
`;
}
}
new tab
<vaadin-notification
theme="contrast"
duration="10000"
position="middle"
.opened="${this.notificationOpened}"
@opened-changed="${(e: NotificationOpenedChangedEvent) => {
this.notificationOpened = e.detail.value;
}}"
${notificationRenderer(this.renderer, [])}
></vaadin-notification>
...
renderer: NotificationLitRenderer = () => html`
<vaadin-horizontal-layout theme="spacing" style="align-items: center;">
<div>5 tasks deleted</div>
<vaadin-button
theme="tertiary-inline"
style="margin-left: var(--lumo-space-xl);"
@click="${this.close}"
>
Undo
</vaadin-button>
<vaadin-button theme="tertiary-inline" aria-label="Close" @click="${this.close}">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
`;
Notifications can also contain links to relevant information.
new tab
import { html, LitElement } from 'lit';
import '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { applyTheme } from 'Frontend/generated/theme';
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card slot="middle">
<vaadin-horizontal-layout theme="spacing" style="align-items: center;">
<div>Jason Bailey mentioned you in <a href="#">Project Q4</a></div>
<vaadin-button theme="tertiary-inline">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
</vaadin-notification-card>
`;
}
}
new tab
<!-- The duration is set to 0-sec to prevent the notification from auto-close. -->
<vaadin-notification
duration="0"
position="middle"
.opened="${this.notificationOpened}"
@opened-changed="${(e: NotificationOpenedChangedEvent) => {
this.notificationOpened = e.detail.value;
}}"
${notificationRenderer(this.renderer, [])}
></vaadin-notification>
...
renderer: NotificationLitRenderer = () => html`
<vaadin-horizontal-layout theme="spacing" style="align-items: center;">
<div>Jason Bailey mentioned you in <a href="#">Project Q4</a></div>
<vaadin-button theme="tertiary-inline" aria-label="Close" @click="${this.close}">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
`;
Making Interactive Elements Keyboard-Accessible
Take care to ensure that keyboard-only users can access interactive elements in notifications:
-
Make the notification persistent, to prevent it from disappearing before the user has had a chance to interact with it.
-
Provide a keyboard shortcut, either to trigger the action itself, or to move focus to the notification card in cases where multiple interactive elements are present.
-
Make the shortcut discoverable, for example by displaying it as part of the notification’s content.
new tab
import { html, LitElement } from 'lit';
import '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/notification';
import { applyTheme } from 'Frontend/generated/theme';
const isMac = /Macintosh|MacIntel|MacPPC|Mac68K/.test(window.navigator.platform);
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card theme="contrast" slot="middle">
<vaadin-horizontal-layout style="align-items: center;">
<div>5 tasks deleted</div>
<vaadin-button theme="primary" style="margin-left: var(--lumo-space-xl);">
Undo ${isMac ? '⌘' : 'Ctrl-'}Z
</vaadin-button>
</vaadin-horizontal-layout>
</vaadin-notification-card>
`;
}
}
new tab
protected override render() {
return html`
<vaadin-notification
theme="contrast"
duration="10000"
position="middle"
.opened="${this.notificationOpened}"
@opened-changed="${(e: NotificationOpenedChangedEvent) => {
this.notificationOpened = e.detail.value;
}}"
${notificationRenderer(this.renderer, [])}
></vaadin-notification>
`;
}
renderer: NotificationLitRenderer = () => html`
<vaadin-horizontal-layout style="align-items: center;">
<div>5 tasks deleted</div>
<vaadin-button
style="margin-left: var(--lumo-space-xl);"
theme="primary"
@click="${this.close}"
>
Undo
<!-- Ideally, this should be hidden if the
device does not have a physical keyboard -->
${this.isMac ? '⌘' : 'Ctrl-'}Z
</vaadin-button>
</vaadin-horizontal-layout>
`;
connectedCallback() {
super.connectedCallback();
document.addEventListener('keydown', this.onKeyDown);
}
disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener('keydown', this.onKeyDown);
}
onKeyDown = (event: KeyboardEvent) => {
if (this.notificationOpened && (event.metaKey || event.ctrlKey) && event.key === 'z') {
// Handle your custom undo logic here
// Avoid triggering the native undo action
event.preventDefault();
this.close();
}
};
Icons and Other Rich Formatting
Icons and other content formatting can be used to provide information and helpful visual cues, for example to make errors and success notifications easier to distinguish for users with color blindness.
new tab
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import '@vaadin/avatar';
import '@vaadin/button';
import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { applyTheme } from 'Frontend/generated/theme';
@customElement('notification-rich-preview')
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card theme="success" slot="middle">
<vaadin-horizontal-layout theme="spacing" style="align-items: center">
<vaadin-icon icon="vaadin:check-circle"></vaadin-icon>
<div>Application submitted!</div>
<vaadin-button style="margin: 0 0 0 var(--lumo-space-l)">View</vaadin-button>
<vaadin-button theme="tertiary-inline">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
</vaadin-notification-card>
<vaadin-notification-card theme="error" slot="middle">
<vaadin-horizontal-layout theme="spacing" style="align-items: center">
<vaadin-icon icon="vaadin:warning"></vaadin-icon>
<div>Failed to generate report</div>
<vaadin-button style="margin: 0 0 0 var(--lumo-space-l)">Retry</vaadin-button>
<vaadin-button theme="tertiary-inline">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
</vaadin-notification-card>
<vaadin-notification-card slot="middle">
<vaadin-horizontal-layout theme="spacing" style="align-items: center">
<vaadin-avatar name="Jason Bailey"></vaadin-avatar>
<div><b>Jason Bailey</b> mentioned you in <a href="#">Project Q4</a></div>
<vaadin-button theme="tertiary-inline">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
</vaadin-notification-card>
<vaadin-notification-card slot="middle">
<vaadin-horizontal-layout theme="spacing" style="align-items: center">
<vaadin-icon
icon="vaadin:check-circle"
style="color: var(--lumo-success-color)"
></vaadin-icon>
<div>
<b style="color: var(--lumo-success-text-color);">Upload successful</b>
<div
style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);"
>
<b>Financials.xlsx</b> is now available in <a href="#">Documents</a>
</div>
</div>
<vaadin-button theme="tertiary-inline">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
</vaadin-notification-card>
`;
}
}
new tab
<vaadin-notification
${notificationRenderer(
(notification) => html`
<vaadin-horizontal-layout theme="spacing" style="align-items: center">
<vaadin-icon icon="vaadin:check-circle"></vaadin-icon>
<div>Application submitted!</div>
<vaadin-button
style="margin: 0 0 0 var(--lumo-space-l)"
@click="${() => notification.close()}"
>
View
</vaadin-button>
<vaadin-button
theme="tertiary-inline"
@click="${() => notification.close()}"
aria-label="Close"
>
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
`,
[]
)}
theme="success"
position="middle"
></vaadin-notification>
<vaadin-notification
${notificationRenderer(
(notification) => html`
<vaadin-horizontal-layout theme="spacing" style="align-items: center">
<vaadin-icon icon="vaadin:warning"></vaadin-icon>
<div>Failed to generate report</div>
<vaadin-button
style="margin: 0 0 0 var(--lumo-space-l)"
@click="${() => notification.close()}"
>
Retry
</vaadin-button>
<vaadin-button
theme="tertiary-inline"
@click="${() => notification.close()}"
aria-label="Close"
>
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
`,
[]
)}
theme="error"
position="middle"
></vaadin-notification>
<vaadin-notification
${notificationRenderer(
(notification) => html`
<vaadin-horizontal-layout theme="spacing" style="align-items: center">
<vaadin-avatar name="Jason Bailey"></vaadin-avatar>
<div><b>Jason Bailey</b> mentioned you in <a href="#">Project Q4</a></div>
<vaadin-button
theme="tertiary-inline"
@click="${() => notification.close()}"
aria-label="Close"
>
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
`,
[]
)}
position="middle"
></vaadin-notification>
<vaadin-notification
${notificationRenderer(
(notification) => html`
<vaadin-horizontal-layout theme="spacing" style="align-items: center">
<vaadin-icon
icon="vaadin:check-circle"
style="color: var(--lumo-success-color)"
></vaadin-icon>
<div>
<b style="color: var(--lumo-success-text-color);">Upload successful</b>
<div
style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color)"
>
<b>Financials.xlsx</b> is now available in <a href="#">Documents</a>
</div>
</div>
<vaadin-button
theme="tertiary-inline"
@click="${() => notification.close()}"
aria-label="Close"
>
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-horizontal-layout>
`,
[]
)}
position="middle"
></vaadin-notification>
Static Helper
For simple, one-off notifications, it’s convenient to use the static show()
helper method.
The helper manages the notification’s lifecycle, and adds and removes it from the DOM automatically.
new tab
// Show a simple text-based notification
Notification.show('Financial report generated', {
position: 'middle',
});
// Show a notification with markup using a Lit template
Notification.show(
html`
<b>@John:</b>
<span>
How about lunch at
<span style="color: var(--lumo-primary-text-color)">12:30pm</span>?
</span>
`,
{
position: 'middle',
}
);
Best Practices
Use Sparingly
Notifications are disruptive by design and should be used sparingly. Use fewer notifications by reserving them for more-important information that might otherwise go unnoticed by the user.
Less-urgent notifications can be provided through a link or drop-down in the application header or footer, instead of via immediate notifications.
new tab
protected override render() {
return html`
<vaadin-context-menu
open-on="click"
${contextMenuRenderer(
() => html`<div style="padding: var(--lumo-space-l);">Show notifications here</div>`,
[]
)}
>
<vaadin-button aria-label="notifications" theme="tertiary">
<vaadin-icon icon="vaadin:bell-o"></vaadin-icon>
<span theme="badge error primary small pill">4</span>
</vaadin-button>
</vaadin-context-menu>
`;
}
Limit Content Length
Aim for one or two lines of content. Notifications should be brief and to the point. More information can be provided through an embedded link or Button.
new tab
import { html, LitElement } from 'lit';
import '@vaadin/button';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { applyTheme } from 'Frontend/generated/theme';
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card slot="middle">
<div>
<div>Aria Bailey</div>
<div style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);">
Yeah, I know. But could you help me with...
</div>
</div>
<vaadin-button>View</vaadin-button>
<vaadin-button theme="tertiary-inline">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-notification-card>
`;
}
}
new tab
import { html, LitElement } from 'lit';
import '@vaadin/button';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { applyTheme } from 'Frontend/generated/theme';
export class Example extends LitElement {
protected override createRenderRoot() {
const root = super.createRenderRoot();
// Apply custom theme (only supported if your app uses one)
applyTheme(root);
return root;
}
protected override render() {
return html`
<vaadin-notification-card slot="middle">
<div>
<div>New message from Aria Bailey</div>
<div style="font-size: var(--lumo-font-size-s); color: var(--lumo-secondary-text-color);">
Yeah, I know. But could you help me with this. I’m not sure where the bug is in my CSS?
The checkmark doesn’t get the right color. I’m trying to use the CSS custom properties
from our design system, but for some reason it’s not working.
</div>
</div>
<vaadin-button theme="tertiary-inline">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</vaadin-notification-card>
`;
}
}