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
`primary`	Used for important informational messages or to draw extra attention	Lumo
`success`	Used to display success messages	Lumo
`warning`	Used to display warnings	Lumo
`error`	Used to display errors	Lumo
`contrast`	Used to distinguish the notification from the rest of the UI	Lumo

primary

Used for important informational messages or to draw extra attention

Lumo

success

Used to display success messages

Lumo

warning

Used to display warnings

Lumo

error

Used to display errors

Lumo

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.LUMO_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.HtmlComponent;
import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
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.LUMO_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.Text;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.icon.Icon;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.notification.NotificationVariant;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.FlexComponent.Alignment;
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.LUMO_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.

Primary

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

Open in a
new tab

Source code

NotificationPrimary.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-primary")
public class NotificationPrimary extends Div {

    public NotificationPrimary() {
        // 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.LUMO_PRIMARY);
        // end::snippet[]
        notification.setPosition(Notification.Position.MIDDLE);
        notification.setDuration(0);
    }

}
notification-primary.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: 'primary',
    });
    // end::snippet[]
  }, []);

  return <></>;
}

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

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

Contrast

The contrast variant can improve legibility and distinguish the notification from the rest of the UI.

Open in a
new tab

Source code

NotificationContrast.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-contrast")
public class NotificationContrast extends Div {

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

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

function Example() {
  useEffect(() => {
    // tag::snippet[]
    const notification = Notification.show('5 tasks deleted', {
      position: 'middle',
      duration: 0,
      theme: 'contrast',
    });
    // end::snippet[]
  }, []);

  return <></>;
}

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

@customElement('notification-contrast')
export class Example extends LitElement {
  firstUpdated() {
    // tag::snippet[]
    const notification = Notification.show('5 tasks deleted', {
      position: 'middle',
      duration: 0,
      theme: 'contrast',
    });
    // 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

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.

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

Primary

Contrast

Style Properties

Notification Card Properties

Notification Container Properties

CSS Selectors

Parts