Granite Alert

Vaadin global notifications (wrapper for https://github.com/LostInBrittany/granite-alert with themable support)

View larger

Close

GraniteAlert is a container for other components, which are rendered inside the alert, and can be used as a way of displaying a global notification. The property level maps to the level attribute of granite-alert, with each level (info, warning, error and success) providing a different style. The property compact enables additional style rules that reduce spacing around the content.

It is also posible to injecting styles directly into the granite-alert shadow DOM, by using style modules (see examples)

Found a bug or have a suggestion? Report it on GitHub

For bug reports, feature suggestions, or questions, please open an issue on GitHub. This makes it easier for us to track and respond efficiently, ensuring you get the best possible support. Your input helps us improve—thank you!

Sample code

GraniteAlert alert = new GraniteAlert();
alert.setCompact(true);
alert.setLevel(GraniteAlertLevel.SUCCESS);
alert.add(new Span("Success!"));

<dom-module id="custom-granite-alert-theme" theme-for="granite-alert">
  <template>
    <style>
        :host(.custom) .alert {
            color: var(--lumo-body-text-color);
            background-color: white;
            border-color: grey;
        }
    </style>
  </template>
</dom-module>

Links

• View on GitHub
• Author Homepage
• Source Code
• Issue tracker
• Online Demo

Compatibility