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

# <a id="notification"></a>Notification

Notification is used to provide feedback to the user about activities, processes, and events in the application.

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

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

**Flow** — `NotificationBasic.java`

```java
// When creating a notification using the `show` static method,
// the duration is 5-sec by default.
Notification notification = Notification
        .show("Financial report generated");
```

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

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

## <a id="duration"></a>Duration

By default, notifications stay on-screen for five seconds. The duration can be set — in milliseconds — and should be done so based on the content and its importance:

- Use short durations for notifications that contain short text, are of lesser importance (e.g., operations that finished without errors), and have no interactive elements.

- Use longer durations for notifications that contain longer text, are of higher importance (e.g., errors), and have interactive elements (e.g., links or "undo" actions).

A duration of at least five seconds (i.e., `5000` milliseconds) is recommended — this is why it’s the default — to ensure that the user has a chance to read and understand the notification.

### <a id="persistent-notifications"></a>Persistent Notifications

Setting the duration to `0` milliseconds disables auto-closing. It keeps the notification visible until it’s 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, or allows the user to take appropriate action. Less-important notifications shouldn’t be persistent, and instead disappear automatically after an appropriate delay.

## <a id="position"></a>Position

Notifications can be positioned in the viewport in seven non-stretched positions, or stretched across the top or bottom:

Use the `position` attribute in HTML templates (e.g., `<vaadin-notification position="top-end"></vaadin-notification>`).

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

```typescript
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 });
}
```

**Flow** — `NotificationPosition.java`

```java
add(createButton(Position.TOP_STRETCH),
        createButton(Position.TOP_START),
        createButton(Position.TOP_CENTER),
        createButton(Position.TOP_END), createButton(Position.MIDDLE),
        createButton(Position.BOTTOM_START),
        createButton(Position.BOTTOM_CENTER),
        createButton(Position.BOTTOM_END),
        createButton(Position.BOTTOM_STRETCH));

...

private Button createButton(Notification.Position position) {
    Button button = new Button(position.getClientName());
    button.addClickListener(event -> show(position));
    return button;
}

...

private void show(Notification.Position position) {
    Notification.show(position.getClientName(), 5000, position);
}
```

`notification-position-example.css`

```css
```

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

```tsx
<Button onClick={() => show('top-stretch')}>top-stretch</Button>
<Button onClick={() => show('top-start')}>top-start</Button>
<Button onClick={() => show('top-center')}>top-center</Button>
<Button onClick={() => show('top-end')}>top-end</Button>
<Button onClick={() => show('middle')}>middle</Button>
<Button onClick={() => show('bottom-start')}>bottom-start</Button>
<Button onClick={() => show('bottom-center')}>bottom-center</Button>
<Button onClick={() => show('bottom-end')}>bottom-end</Button>
<Button onClick={() => show('bottom-stretch')}>bottom-stretch</Button>
```

**Top End** or **Bottom Start** are recommended for most notifications. They’re 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 disruptive, and should be reserved for important notifications whose content requires more space.

Applications with a notification button, or a 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.

## <a id="stacking"></a>Stacking

Multiple simultaneously displayed notifications are stacked vertically. The ordering of them, though, depends 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.

## <a id="size"></a>Size

With the Aura theme and base styles, notifications use a fixed width. The width never exceeds the width of the browser viewport. You can change the width using the `--vaadin-notification-width` CSS custom property.

With the Lumo theme, notifications are sized based on their content. In large viewports, the card’s maximum width is one-third of the viewport. In small viewports (below 450px), the card always consumes the entire width of the viewport.

## <a id="interactive-elements"></a>Interactive Elements

Notifications can contain interactive content (e.g., 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.

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

```html
<!-- 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}"
  @closed="${() => {
    this.notificationOpened = false;
  }}"
  ${notificationRenderer(this.renderer, [])}
></vaadin-notification>

<!-- ... -->

renderer: NotificationLitRenderer = () => html`
  <vaadin-horizontal-layout theme="spacing" style="align-items: center; min-width: 350px;">
    <div>Failed to generate report</div>
    <vaadin-button slot="end" @click="${this.close}">Retry</vaadin-button>
    <vaadin-button slot="end" theme="icon" @click="${this.close}" aria-label="Close">
      <vaadin-icon icon="lumo:cross"></vaadin-icon>
    </vaadin-button>
  </vaadin-horizontal-layout>
`;
```

**Flow** — `NotificationRetry.java`

```java
Notification notification = new Notification();
notification.addThemeVariants(NotificationVariant.ERROR);

// this is the default, 0 or negative means the Notification
// is not closed automatically
notification.setDuration(0);

// Now we can compose the content from components
Button retryButton = new RetryButton();
Button closeButton = new CloseButton();

HorizontalLayout layout = new HorizontalLayout(
        new Text("Failed to generate report"));
layout.addToEnd(retryButton, closeButton);
layout.setAlignItems(FlexComponent.Alignment.CENTER);
layout.setMinWidth("350px");
notification.add(layout);

notification.open();
```

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

```tsx
{/* The duration is set to 0-sec to prevent the notification from auto-close. */}
<Notification
  theme="error"
  duration={0}
  position="middle"
  opened={notificationOpened.value}
  onClosed={() => {
    notificationOpened.value = false;
  }}
>
  <HorizontalLayout theme="spacing" style={{ alignItems: 'center', minWidth: '350px' }}>
    <div>Failed to generate report</div>
    <Button slot="end" onClick={close}>
      Retry
    </Button>

    <Button slot="end" theme="icon" aria-label="Close" onClick={close}>
      <Icon icon="lumo:cross" />
    </Button>
  </HorizontalLayout>
</Notification>
```

In situations where the user might want to revert an action, display an "Undo" button.

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

```html
<vaadin-notification
  duration="10000"
  position="middle"
  .opened="${this.notificationOpened}"
  @closed="${() => {
    this.notificationOpened = false;
  }}"
  ${notificationRenderer(this.renderer, [])}
></vaadin-notification>

<!-- ... -->

renderer: NotificationLitRenderer = () => html`
  <vaadin-horizontal-layout theme="spacing" style="align-items: center; min-width: 300px">
    <div>5 tasks deleted</div>
    <vaadin-button slot="end" @click="${this.close}">Undo</vaadin-button>
    <vaadin-button slot="end" theme="icon" aria-label="Close" @click="${this.close}">
      <vaadin-icon icon="lumo:cross"></vaadin-icon>
    </vaadin-button>
  </vaadin-horizontal-layout>
`;
```

**Flow** — `NotificationUndo.java`

```java
Notification notification = new Notification();
notification.setDuration(10000);

Button undoButton = new UndoButton();
undoButton.addClickListener(event -> {
    // In this example we just close the Notification
    notification.close();
});

HorizontalLayout layout = new HorizontalLayout(
        new Text("5 tasks deleted"));
layout.addToEnd(undoButton, new CloseButton());
layout.setAlignItems(Alignment.CENTER);
layout.setMinWidth("300px");
notification.add(layout);

notification.open();
```

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

```tsx
<Notification
  duration={10000}
  position="middle"
  opened={notificationOpened.value}
  onClosed={() => {
    notificationOpened.value = false;
  }}
>
  <HorizontalLayout theme="spacing" style={{ alignItems: 'center', minWidth: '300px' }}>
    <div>5 tasks deleted</div>
    <Button slot="end" onClick={close}>
      Undo
    </Button>

    <Button slot="end" theme="icon" aria-label="Close" onClick={close}>
      <Icon icon="lumo:cross" />
    </Button>
  </HorizontalLayout>
</Notification>
```

Notifications can also contain links to relevant information.

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

```html
<!-- The duration is set to 0-sec to prevent the notification from auto-close. -->
<vaadin-notification
  duration="0"
  position="middle"
  .opened="${this.notificationOpened}"
  @closed="${() => {
    this.notificationOpened = false;
  }}"
  ${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 slot="end" theme="tertiary" aria-label="Close" @click="${this.close}">
      <vaadin-icon icon="lumo:cross"></vaadin-icon>
    </vaadin-button>
  </vaadin-horizontal-layout>
`;
```

**Flow** — `NotificationLink.java`

```java
// When creating a notification using the constructor,
// the duration is 0-sec by default which means that
// the notification does not close automatically.
Notification notification = new Notification();

Div text = new Div(new Text("Jason Bailey mentioned you in "),
        new Anchor("#", "Project Q4"));

Button closeButton = new Button(new Icon("lumo", "cross"));
closeButton.addThemeVariants(ButtonVariant.TERTIARY);
closeButton.setAriaLabel("Close");
closeButton.addClickListener(event -> {
    notification.close();
});

HorizontalLayout layout = new HorizontalLayout(text);
layout.addToEnd(closeButton);
layout.setAlignItems(Alignment.CENTER);

notification.add(layout);
notification.open();
```

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

```tsx
{/* The duration is set to 0-sec to prevent the notification from auto-close. */}
<Notification
  duration={0}
  position="middle"
  opened={notificationOpened.value}
  onClosed={() => {
    notificationOpened.value = false;
  }}
>
  <HorizontalLayout theme="spacing" style={{ alignItems: 'center' }}>
    <div>
      Jason Bailey mentioned you in <a href="#">Project Q4</a>
    </div>

    <Button slot="end" theme="tertiary" aria-label="Close" onClick={close}>
      <Icon icon="lumo:cross" />
    </Button>
  </HorizontalLayout>
</Notification>
```

### <a id="keyboard-accessible"></a>Keyboard-Accessible

Make sure 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 react. 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. Finally, make the shortcut discoverable, for example, by displaying it as part of the notification’s content.

**Lit** — `notification-keyboard-a11y.ts`

```typescript
protected override render() {
  return html`
    <vaadin-notification
      duration="10000"
      position="middle"
      .opened="${this.notificationOpened}"
      @closed="${() => {
        this.notificationOpened = false;
      }}"
      ${notificationRenderer(this.renderer, [])}
    ></vaadin-notification>
  `;
}

renderer: NotificationLitRenderer = () => html`
  <vaadin-horizontal-layout style="align-items: center; min-width: 300px;">
    <div>5 tasks deleted</div>
    <vaadin-button slot="end" @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();
  }
};
```

**Flow** — `NotificationKeyboardA11y.java`

```java
public Notification show() {
    Notification notification = new Notification();
    notification.setDuration(10000);

    Div statusText = new Div(new Text("5 tasks deleted"));

    HorizontalLayout layout = new HorizontalLayout(statusText);
    layout.addToEnd(new CloseButtonWithShortcutHint());
    layout.setMinWidth("300px");
    layout.setAlignItems(Alignment.CENTER);

    notification.add(layout);
    notification.open();

    return notification;
}

// ...

public void setupUndoShortcut(Notification notification) {
    Shortcuts.addShortcutListener(notification, notification::close,
            Key.of("z"), KeyModifier.META);
    Shortcuts.addShortcutListener(notification, notification::close,
            Key.of("z"), KeyModifier.CONTROL);
}
```

**React** — `notification-keyboard-a11y.tsx`

```tsx
useEffect(() => {
  const onKeyDown = (event: KeyboardEvent) => {
    if (notificationOpened.value && (event.metaKey || event.ctrlKey) && event.key === 'z') {
      event.preventDefault();
      close();
    }
  };

  document.addEventListener('keydown', onKeyDown);

  return () => {
    document.removeEventListener('keydown', onKeyDown);
  };
}, [notificationOpened.value]);

return (
  <>
    <Button disabled={notificationOpened.value} onClick={open}>
      Show notification
    </Button>

    <Notification
      duration={10000}
      position="middle"
      opened={notificationOpened.value}
      onClosed={() => {
        notificationOpened.value = false;
      }}
    >
      <HorizontalLayout style={{ alignItems: 'center', minWidth: '300px' }}>
        <div>5 tasks deleted</div>
        <Button slot="end" onClick={close}>
          Undo
          {isMac ? '⌘' : 'Ctrl-'}Z
        </Button>
      </HorizontalLayout>
    </Notification>
  </>
);
```

## <a id="icons-other-rich-formatting"></a>Icons & Other Rich Formatting

Icons and other content formatting can be used to provide information and helpful visual cues. For example, you might do this to make error and success notifications easier to distinguish for users with color blindness.

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

```html
<!-- The duration is set to 0-sec to prevent the notification from auto-close. -->
<vaadin-notification
  duration="0"
  ${notificationRenderer(
    () => html`
      <vaadin-horizontal-layout
        theme="spacing"
        style="align-items: center; min-width: 350px;"
      >
        <vaadin-icon icon="vaadin:check-circle"></vaadin-icon>
        <div>Application submitted!</div>
        <vaadin-button slot="end">View</vaadin-button>
        <vaadin-button slot="end" theme="icon" aria-label="Close">
          <vaadin-icon icon="lumo:cross"></vaadin-icon>
        </vaadin-button>
      </vaadin-horizontal-layout>
    `,
    []
  )}
  theme="success"
  position="middle"
></vaadin-notification>

<vaadin-notification
  duration="0"
  ${notificationRenderer(
    () => html`
      <vaadin-horizontal-layout
        theme="spacing"
        style="align-items: center; min-width: 350px;"
      >
        <vaadin-icon icon="vaadin:warning"></vaadin-icon>
        <div>Failed to generate report</div>
        <vaadin-button slot="end">Retry</vaadin-button>
        <vaadin-button slot="end" theme="icon" aria-label="Close">
          <vaadin-icon icon="lumo:cross"></vaadin-icon>
        </vaadin-button>
      </vaadin-horizontal-layout>
    `,
    []
  )}
  theme="error"
  position="middle"
></vaadin-notification>

<vaadin-notification
  duration="0"
  ${notificationRenderer(
    () => html`
      <vaadin-horizontal-layout
        theme="spacing"
        style="align-items: center; min-width: 350px;"
      >
        <vaadin-avatar name="Jason Bailey"></vaadin-avatar>
        <div><b>Jason Bailey</b> mentioned you in <a href="#">Project Q4</a></div>
        <vaadin-button slot="end" theme="icon" aria-label="Close">
          <vaadin-icon icon="lumo:cross"></vaadin-icon>
        </vaadin-button>
      </vaadin-horizontal-layout>
    `,
    []
  )}
  position="middle"
></vaadin-notification>
```

**Flow** — `NotificationRich.java`

```java
public Notification createSubmitSuccess() {
    Notification notification = new Notification();
    notification.addThemeVariants(NotificationVariant.SUCCESS);

    Icon icon = VaadinIcon.CHECK_CIRCLE.create();

    Button viewBtn = new Button("View");

    HorizontalLayout layout = new HorizontalLayout(icon,
            new Text("Application submitted!"));
    layout.addToEnd(viewBtn, createCloseBtn());
    layout.setAlignItems(FlexComponent.Alignment.CENTER);
    layout.setMinWidth("350px");

    notification.add(layout);

    return notification;
}

public Notification createReportError() {
    Notification notification = new Notification();
    notification.addThemeVariants(NotificationVariant.ERROR);

    Icon icon = VaadinIcon.WARNING.create();
    Button retryBtn = new Button("Retry");

    HorizontalLayout layout = new HorizontalLayout(icon,
            new Text("Failed to generate report!"));
    layout.addToEnd(retryBtn, createCloseBtn());
    layout.setAlignItems(FlexComponent.Alignment.CENTER);
    layout.setMinWidth("350px");

    notification.add(layout);

    return notification;
}

public Notification createMentionNotification() {
    Notification notification = new Notification();

    Avatar avatar = new Avatar("Jason Bailey");

    Span name = new Span("Jason Bailey");
    name.getStyle().set("font-weight", "500");

    Div info = new Div(name, new Text(" mentioned you in "),
            new Anchor("#", "Project Q4"));

    HorizontalLayout layout = new HorizontalLayout(avatar, info);
    layout.addToEnd(createCloseBtn());
    layout.setAlignItems(FlexComponent.Alignment.CENTER);
    layout.setMinWidth("350px");

    notification.add(layout);

    return notification;
}

public static Button createCloseBtn() {
    Button closeBtn = new Button(VaadinIcon.CLOSE.create());

    return closeBtn;
}
```

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

```tsx
{/* The duration is set to 0-sec to prevent the notification from auto-close. */}
<Notification duration={0} theme="success" position="middle" opened>
  <HorizontalLayout theme="spacing" style={{ alignItems: 'center', minWidth: '350px' }}>
    <Icon icon="vaadin:check-circle" />
    <div>Application submitted!</div>
    <Button slot="end">View</Button>
    <Button slot="end" theme="icon" aria-label="Close">
      <Icon icon="lumo:cross" />
    </Button>
  </HorizontalLayout>
</Notification>

<Notification duration={0} theme="error" position="middle" opened>
  <HorizontalLayout theme="spacing" style={{ alignItems: 'center', minWidth: '350px' }}>
    <Icon icon="vaadin:warning" />
    <div>Failed to generate report</div>
    <Button slot="end">Retry</Button>
    <Button slot="end" theme="icon" aria-label="Close">
      <Icon icon="lumo:cross" />
    </Button>
  </HorizontalLayout>
</Notification>

<Notification duration={0} position="middle" opened>
  <HorizontalLayout theme="spacing" style={{ alignItems: 'center', minWidth: '350px' }}>
    <Avatar name="Jason Bailey" />
    <div>
      <b>Jason Bailey</b> mentioned you in <a href="#">Project Q4</a>
    </div>
    <Button slot="end" theme="icon" aria-label="Close">
      <Icon icon="lumo:cross" />
    </Button>
  </HorizontalLayout>
</Notification>
```

## <a id="static-helper"></a>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.

**Flow**

```java
// Show a simple text-based notification
Notification notification = Notification.show("Financial report generated");
notification.setPosition(Notification.Position.MIDDLE);
```

**React**

```tsx
import { Notification } from '@vaadin/react-components';

// Show a simple text-based notification
Notification.show('Financial report generated', {
  position: 'middle',
});
```

**Lit**

```typescript
import { html } from 'lit';
import { Notification } from '@vaadin/notification';

// 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>
    &nbsp;
    <span>
      How about lunch at
      <i>12:30pm</i>?
    </span>
  `,
  { position: 'middle' }
);
```

## <a id="best-practices"></a>Best Practices

### <a id="use-sparingly"></a>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 a drop-down in the application header or footer, instead of via immediate notifications.

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

```typescript
protected override render() {
  return html`
    <vaadin-button id="target" aria-label="notifications" theme="tertiary icon">
      <vaadin-icon icon="lumo:bell"></vaadin-icon>
      <vaadin-badge number="4" theme="error filled"></vaadin-badge>
    </vaadin-button>
    <vaadin-popover for="target">
      <div>Show notifications here</div>
    </vaadin-popover>
  `;
}
```

**Flow** — `NotificationPopup.java`

```java
var bellBtn = new MessagesButton();
bellBtn.setUnreadMessages(4);
bellBtn.setAriaLabel("notifications");

Popover popover = new Popover();
popover.setTarget(bellBtn);
Div content = new Div("Show notifications here");
popover.add(content);
```

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

```tsx
<>
  <Button id="target" aria-label="notifications" theme="tertiary icon">
    <Icon icon="lumo:bell" />
    <Badge
      number={4}
      theme="error filled"
      style={{ position: 'absolute', transform: 'translate(-40%, -30%)' }}
    />
  </Button>
  <Popover for="target">
    <div>Show notifications here</div>
  </Popover>
</>
```

### <a id="limit-content-length"></a>Limit Content Length

Notifications should be brief and to the point. Try to limit the content to one or two lines. More information can be provided through an embedded link or Button.

Show a preview of longer content, and link to the full details.

`notification-content-length-do.ts`

```typescript
import '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { html, LitElement } from 'lit';
import { applyTheme } from 'Frontend/demo/theme';

export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-notification-card slot="middle">
        <vaadin-horizontal-layout theme="spacing" style="align-items: center;">
          <div>
            <div>Aria Bailey</div>
            <div style="font-size: 0.875rem; color: var(--vaadin-text-color-secondary);">
              Yeah, I know. But could you help me with...
            </div>
          </div>
          <vaadin-button slot="end">View</vaadin-button>
          <vaadin-button slot="end" theme="icon">
            <vaadin-icon icon="lumo:cross"></vaadin-icon>
          </vaadin-button>
        </vaadin-horizontal-layout>
      </vaadin-notification-card>
    `;
  }
}
```

Don’t display all details in the notification.

`notification-content-length-dont.ts`

```typescript
import '@vaadin/button';
import '@vaadin/horizontal-layout';
import '@vaadin/icon';
import '@vaadin/notification';
import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { html, LitElement } from 'lit';
import { applyTheme } from 'Frontend/demo/theme';

export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-notification-card slot="middle">
        <vaadin-horizontal-layout theme="spacing" style="align-items: center;">
          <div>
            <div>New message from Aria Bailey</div>
            <div style="font-size: 0.875rem; color: var(--vaadin-text-color-secondary);">
              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 slot="end" theme="icon">
            <vaadin-icon icon="lumo:cross"></vaadin-icon>
          </vaadin-button>
        </vaadin-horizontal-layout>
      </vaadin-notification-card>
    `;
  }
}
```

## <a id="related-components"></a>Related Components

| Component                                                     | Usage Recommendation                                                                            |
| ------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| [Dialog](https://vaadin.com/docs/latest/components/dialog.md) | Dialog should be used instead of Notification for anything that requires immediate user action. |

`77E15AD0-F634-4D81-8C4D-FAC7A21D889B`