Notification Styling

Styling API reference for the Notification component.

Style Variants
Style Properties
CSS Selectors

Style Variants

Notification supports the following style variants.

Variant Description Supported by

Variant	Description	Supported by
`success`	Used to display success messages	Lumo, Aura
`warning`	Used to display warnings	Lumo, Aura
`error`	Used to display errors	Lumo, Aura
`info`	Used for informational messages	Lumo, Aura
`contrast`	Used to distinguish the notification from the rest of the UI	Lumo

success

Used to display success messages

Lumo, Aura

warning

Used to display warnings

Lumo, Aura

error

Used to display errors

Lumo, Aura

info

Used for informational messages

Lumo, Aura

contrast

Used to distinguish the notification from the rest of the UI

Lumo

Success

The success variant can be used to display success messages, such as when a task or operation is completed.

Open in a
new tab

Source code

NotificationSuccess.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.router.Route;

@Route("notification-success")
public class NotificationSuccess extends Div {

    public NotificationSuccess() {
        // tag::snippet[]
        Notification notification = Notification.show("Application submitted!");
        notification.addThemeVariants(NotificationVariant.SUCCESS);
        // end::snippet[]
        notification.setPosition(Notification.Position.MIDDLE);
        notification.setDuration(0);
    }

}
notification-success.tsximport React, { useEffect } from 'react';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  useEffect(() => {
    // tag::snippet[]
    const notification = Notification.show('Financial report generated', {
      position: 'middle',
      duration: 0,
      theme: 'success',
    });
    // end::snippet[]
  }, []);

  return <></>;
}

notification-success.tsimport { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Notification } from '@vaadin/notification';

@customElement('notification-success')
export class Example extends LitElement {
  firstUpdated() {
    // tag::snippet[]
    const notification = Notification.show('Application submitted!', {
      position: 'middle',
      duration: 0,
      theme: 'success',
    });
    // end::snippet[]
  }
}

Users shouldn’t be notified always, or even frequently, of successful operations. Too many notifications can be more distracting than helpful to users. Use success notifications only for operations whose successful completion may otherwise be difficult to discern.

Warning

The warning variant can be used to display warnings.

Open in a
new tab

Source code

NotificationWarning.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.router.Route;

@Route("notification-warning")
public class NotificationWarning extends Div {

    public NotificationWarning() {
        // tag::snippet[]
        Notification notification = Notification
                .show("Your section is about to expire");
        notification.addThemeVariants(NotificationVariant.WARNING);
        // end::snippet[]
        notification.setPosition(Notification.Position.MIDDLE);
        notification.setDuration(0);
    }

}
notification-warning.tsximport React, { useEffect } from 'react';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  useEffect(() => {
    // tag::snippet[]
    const notification = Notification.show('Your session is about to expire', {
      position: 'middle',
      duration: 0,
      theme: 'warning',
    });
    // end::snippet[]
  }, []);

  return <></>;
}

notification-warning.tsimport { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Notification } from '@vaadin/notification';

@customElement('notification-warning')
export class Example extends LitElement {
  firstUpdated() {
    // tag::snippet[]
    const notification = Notification.show('Your session is about to expire', {
      position: 'middle',
      duration: 0,
      theme: 'warning',
    });
    // end::snippet[]
  }
}

Warning notifications should be persistent, and provide the user with a button that closes the notification or allows the user to take appropriate action.

Error

The error variant can be used to display errors.

Open in a
new tab

Source code

NotificationError.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.router.Route;

@Route("notification-error")
public class NotificationError extends Div {

    public NotificationError() {
        // tag::snippet[]
        Notification notification = Notification
                .show("Failed to generate report");
        notification.addThemeVariants(NotificationVariant.ERROR);
        // end::snippet[]
        notification.setPosition(Notification.Position.MIDDLE);
        notification.setDuration(0);
    }

}
notification-error.tsximport React, { useEffect } from 'react';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  useEffect(() => {
    // tag::snippet[]
    const notification = Notification.show('Failed to generate report', {
      position: 'middle',
      duration: 0,
      theme: 'error',
    });
    // end::snippet[]
  }, []);

  return <></>;
}

notification-error.tsimport { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Notification } from '@vaadin/notification';

@customElement('notification-error')
export class Example extends LitElement {
  firstUpdated() {
    // tag::snippet[]
    const notification = Notification.show('Failed to generate report', {
      position: 'middle',
      duration: 0,
      theme: 'error',
    });
    // end::snippet[]
  }
}

Error notifications should be persistent, and provide the user with a button that closes the notification or allows the user to take appropriate action.

Notifications are non-modal and can be ignored. Therefore, they’re usually inappropriate for displaying unexpected technical errors that prevent the application from functioning, or situations that require immediate user action. Use instead a modal Dialog in such situations.

The built-in error message feature, included with input field components, should be used for field-specific input validation errors.

Info

The info variant can be used for informational messages or to draw extra attention to a notification.

Open in a
new tab

Source code

NotificationInfo.javapackage com.vaadin.demo.component.notification;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.router.Route;

@Route("notification-info")
public class NotificationInfo extends Div {

    public NotificationInfo() {
        // tag::snippet[]
        // When creating a notification using the `show` static method,
        // the duration is 5-sec by default.
        Notification notification = Notification
                .show("New project plan available");
        notification.addThemeVariants(NotificationVariant.INFO);
        // end::snippet[]
        notification.setPosition(Notification.Position.MIDDLE);
        notification.setDuration(0);
    }

}
notification-info.tsximport React, { useEffect } from 'react';
import { Notification } from '@vaadin/react-components/Notification.js';

function Example() {
  // tag::snippet[]
  useEffect(() => {
    const notification = Notification.show('New project plan available', {
      position: 'middle',
      duration: 0,
      theme: 'info',
    });
    // end::snippet[]
  }, []);

  return <></>;
}

notification-info.tsimport '@vaadin/button';
import { LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { Notification } from '@vaadin/notification';

@customElement('notification-info')
export class Example extends LitElement {
  firstUpdated() {
    // tag::snippet[]
    const notification = Notification.show('New project plan available', {
      position: 'middle',
      duration: 0,
      theme: 'info',
    });
    // end::snippet[]
  }
}

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…} selector. See Component Style Properties for more information on style properties.

Notification Card Properties

The following properties apply to the vaadin-notification-card element:

Property Supported by

Property	Supported by
`--vaadin-notification-background`	Aura
`--vaadin-notification-border-color`	Aura
`--vaadin-notification-border-radius`	Aura
`--vaadin-notification-border-width`	Aura
`--vaadin-notification-padding`	Aura
`--vaadin-notification-shadow`	Aura
`--vaadin-notification-width`	Aura

--vaadin-notification-background

Aura

--vaadin-notification-border-color

Aura

--vaadin-notification-border-radius

Aura

--vaadin-notification-border-width

Aura

--vaadin-notification-padding

Aura

--vaadin-notification-shadow

Aura

--vaadin-notification-width

Aura

Notification Container Properties

The following properties apply to the vaadin-notification-container element:

Property Supported by

Property	Supported by
`--vaadin-notification-container-gap`	Aura
`--vaadin-notification-viewport-inset`	Aura

--vaadin-notification-container-gap

Aura

--vaadin-notification-viewport-inset

Aura

Animation

The overlay has a built-in opening and closing animation, which is disabled until an animation duration is set. The closed properties define the state that the overlay animates from when it opens, and to when it closes. The Aura theme sets these properties for some components. Lumo has its own overlay animations, which these properties don’t affect.

While an animation runs, the component has the opening or closing state attribute, so separate values can be applied to each direction. The backdrop always fades, and only the opacity is animated when the user prefers reduced motion.

Property Value syntax Initial value

Property	Value syntax	Initial value
`--vaadin-overlay-animation-delay`	`<time>`	`0s`
`--vaadin-overlay-animation-duration`	`<time>`	`0s`
`--vaadin-overlay-animation-timing-function`	`<easing-function>`	`ease`
`--vaadin-overlay-opacity-closed`	`<number>`	`0`
`--vaadin-overlay-scale-closed`	`<number>` or `<percentage>`	`1`
`--vaadin-overlay-transform-closed`	`<transform-list>`	`none`
`--vaadin-overlay-translate-closed`	`<length>+` or `<percentage>+`	`0px`

--vaadin-overlay-animation-delay

<time>

0s

--vaadin-overlay-animation-duration

<time>

0s

--vaadin-overlay-animation-timing-function

<easing-function>

ease

--vaadin-overlay-opacity-closed

<number>

0

--vaadin-overlay-scale-closed

<number> or <percentage>

1

--vaadin-overlay-transform-closed

<transform-list>

none

--vaadin-overlay-translate-closed

<length>+ or <percentage>+

0px

Note	Notifications are animated by default, so these properties adjust an existing animation rather than enable one. They’re set on the `vaadin-notification-card` element.

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Important

Not for Shadow DOM

These selectors should be used in styles.css or another stylesheet loaded with the @StyleSheet annotation or the @import CSS rule. They do not work in the shadow DOM of Vaadin components, such as in stylesheets in the components sub-folder or loaded with the @CssImport annotation’s themeFor property.

Root element: vaadin-notification-card

Parts

Notification card: vaadin-notification-card::part(overlay)
Content wrapper: vaadin-notification-card::part(content)

Docs

Docs

Notification Styling

Style Variants

Success

Warning

Error

Info

Style Properties

Notification Card Properties

Notification Container Properties

Animation

CSS Selectors

Parts