> Markdown version of [Styling](https://vaadin.com/docs/next/components/notification/styling). Section index: [llms.txt](https://vaadin.com/docs/next/components/llms.txt)

# Notification Styling

## <a id="style-variants"></a>Style Variants

Notification supports the following style variants.

| 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         |

### <a id="success"></a>Success

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

**Lit** — `notification-success.ts`

```typescript
const notification = Notification.show('Application submitted!', {
  position: 'middle',
  duration: 0,
  theme: 'success',
});
```

**Flow** — `NotificationSuccess.java`

```java
Notification notification = Notification.show("Application submitted!");
notification.addThemeVariants(NotificationVariant.SUCCESS);
```

**React** — `notification-success.tsx`

```tsx
const notification = Notification.show('Financial report generated', {
  position: 'middle',
  duration: 0,
  theme: 'success',
});
```

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.

### <a id="warning"></a>Warning

The `warning` variant can be used to display warnings.

**Lit** — `notification-warning.ts`

```html
const notification = Notification.show('Your session is about to expire', {
  position: 'middle',
  duration: 0,
  theme: 'warning',
});
```

**Flow** — `NotificationWarning.java`

```java
Notification notification = Notification
        .show("Your section is about to expire");
notification.addThemeVariants(NotificationVariant.WARNING);
```

**React** — `notification-warning.tsx`

```tsx
const notification = Notification.show('Your session is about to expire', {
  position: 'middle',
  duration: 0,
  theme: 'warning',
});
```

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

### <a id="error"></a>Error

The `error` variant can be used to display errors.

**Lit** — `notification-error.ts`

```html
const notification = Notification.show('Failed to generate report', {
  position: 'middle',
  duration: 0,
  theme: 'error',
});
```

**Flow** — `NotificationError.java`

```java
Notification notification = Notification
        .show("Failed to generate report");
notification.addThemeVariants(NotificationVariant.ERROR);
```

**React** — `notification-error.tsx`

```tsx
const notification = Notification.show('Failed to generate report', {
  position: 'middle',
  duration: 0,
  theme: 'error',
});
```

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](https://vaadin.com/docs/next/components/dialog.md) in such situations.

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

### <a id="info"></a>Info

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

**Lit** — `notification-info.ts`

```typescript
const notification = Notification.show('New project plan available', {
  position: 'middle',
  duration: 0,
  theme: 'info',
});
```

**Flow** — `NotificationInfo.java`

```java
// 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);
```

**React** — `notification-info.tsx`

```tsx
useEffect(() => {
  const notification = Notification.show('New project plan available', {
    position: 'middle',
    duration: 0,
    theme: 'info',
  });
```

## <a id="style-properties"></a>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](https://vaadin.com/docs/next/styling/styling-components.md#component-style-properties) for more information on style properties.

#### <a id="notification-card-properties"></a>Notification Card Properties

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

| 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         |

#### <a id="notification-container-properties"></a>Notification Container Properties

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

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

### <a id="animation"></a>Animation (since V25.3)

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 |
| -------------------------------------------- | ------------------------------ | ------------- |
| `--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.

## <a id="css-selectors"></a>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](https://vaadin.com/docs/next/styling.md) 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`

### <a id="parts"></a>Parts

- Notification card

  `vaadin-notification-card::part(overlay)`

- Content wrapper

  `vaadin-notification-card::part(content)`