Add more Aura style variants for Notification

[mustafaguc]

Description

Notifications are always displayed with the default theme variant, even when a specific variant is explicitly configured. The configured theme (e.g., NotificationVariant.LUMO_SUCCESS) is not respected. This issue occurs with Aura theme.

Steps to Reproduce

1. Create a notification with a custom theme variant:

   Notification
       .show("Hello World!", 3000, Notification.Position.BOTTOM_CENTER)
       .addThemeVariants(NotificationVariant.LUMO_SUCCESS)
   

2. Run the application.
3. Observe the notification styling.

Multiple invocation of show notification. btw theme variant is successfully applied at client side

Expected behavior

it should display notification by configured variant.

Minimal reproducible example

Create a new vaadin 25 spring boot gradle kotlin project, add an empty view and button and display a notification with a variant other than default

@StyleSheet(Aura.STYLESHEET)
@SpringBootApplication
class DashboardModuleApplication : AppShellConfigurator

fun main(args: Array<String>) {
    runApplication<DashboardModuleApplication>(*args)
}

// home view 
@PageTitle(Titles.HOME)
@Route(Routes.HOME)
@RouteAlias("")
@PermitAll
class HomeView2 : KComposite() {

    init {
        ui {
            verticalLayout(false) {
                text("Welcome to the Dashboard")
                isPadding = true
                button {
                    text = "Hello World"
                    addClickListener {
                        Notification.show("Hello World!").addThemeVariants(NotificationVariant.LUMO_SUCCESS)
                    }
                }
            }
        }
    }

}

Versions

• Vaadin / Flow version: 25.0-beta9
• Java version: 25
• OS version: Windows 11 2025H2
• Browser version (if applicable): 143.0.7499.40 (Official Build) (64-bit) (cohort: 143.0.7499.40 Rollout)
• Application Server (if applicable): Apache Tomcat
• IDE (if applicable): IntelliJ IDEA

Dependencies (libs.versions.toml):

[versions]
# Core Plugins
kotlin = "2.2.21"
spring-boot = "4.0.0"
spring-dependency-management = "1.1.7"
springdoc-plugin = "1.9.0"

# Libraries
springdoc = "3.0.0" # Updated for Spring Boot 4 support
opentelemetry = "2.22.0" # Latest stable for SB 4
vaadin = "25.0.0-beta9"
line-awesome = "2.1.0"
karibu-dsl = "2.4.0"
crudui = "7.2.0"
font-awesome = "5.3.0"

# Testing
junit = "5.10.2"

[libraries]
# --- Spring Boot ---
# Note: Starters don't need versions if using the Spring Boot plugin,
# but we define them here for clarity or non-managed contexts.
spring-boot-starter-web = { module = "org.springframework.boot:spring-boot-starter-web" }
spring-boot-starter-actuator = { module = "org.springframework.boot:spring-boot-starter-actuator" }
spring-boot-devtools = { module = "org.springframework.boot:spring-boot-devtools" }
spring-boot-starter-data-jpa = { module = "org.springframework.boot:spring-boot-starter-data-jpa" }
spring-boot-starter-security = { module = "org.springframework.boot:spring-boot-starter-security" }
spring-boot-starter-oauth2-client = { module = "org.springframework.boot:spring-boot-starter-oauth2-client" }
spring-boot-starter-oauth2-resource-server = { module = "org.springframework.boot:spring-boot-starter-oauth2-resource-server" }
spring-boot-starter-test = { module = "org.springframework.boot:spring-boot-starter-test" }

# --- Postgres ---
postgresql = { module = "org.postgresql:postgresql" }

# --- H2 ---
h2 = { module = "com.h2database:h2" }

# --- Kotlin ---
kotlin-reflect = { module = "org.jetbrains.kotlin:kotlin-reflect" }
jackson-module-kotlin = { module = "com.fasterxml.jackson.module:jackson-module-kotlin" }

# --- Security ---
spring-security-oauth2-jose = { module = "org.springframework.security:spring-security-oauth2-jose" }

# --- Vaadin ---
vaadin-bom = { module = "com.vaadin:vaadin-bom", version.ref = "vaadin" }
vaadin = { module = "com.vaadin:vaadin" }  # Added full Vaadin platform
vaadin-dev = { module = "com.vaadin:vaadin-dev" }  # Added dev-time dependencies
vaadin-spring-boot-starter = { module = "com.vaadin:vaadin-spring-boot-starter" }
vaadin-line-awesome = { module = "org.parttio:line-awesome", version.ref = "line-awesome" }
vaadin-dsl = { module = "com.github.mvysny.karibudsl:karibu-dsl", version.ref = "karibu-dsl" }
vaadin-dsl-v23 = { module = "com.github.mvysny.karibudsl:karibu-dsl-v23", version.ref = "karibu-dsl" }
vaadin-crud = { module = "org.vaadin.crudui:crudui", version.ref = "crudui" }
font-awesome-iron-iconset = { module = "com.flowingcode.addons:font-awesome-iron-iconset", version.ref = "font-awesome" }

# --- Documentation ---
# 'springdoc-openapi-starter-webmvc-ui' is the correct artifact for SB 3/4
springdoc-openapi-ui = { module = "org.springdoc:springdoc-openapi-starter-webmvc-ui", version.ref = "springdoc" }

# --- Observability ---
opentelemetry-bom = { module = "io.opentelemetry.instrumentation:opentelemetry-instrumentation-bom", version.ref = "opentelemetry" }
opentelemetry-spring-boot-starter = { module = "io.opentelemetry.instrumentation:opentelemetry-spring-boot-starter" }
opentelemetry-trace-propagators = { module = "io.opentelemetry:opentelemetry-extension-trace-propagators" }


[plugins]
kotlin-jvm = { id = "org.jetbrains.kotlin.jvm", version.ref = "kotlin" }
kotlin-spring = { id = "org.jetbrains.kotlin.plugin.spring", version.ref = "kotlin" }
spring-boot = { id = "org.springframework.boot", version.ref = "spring-boot" }
spring-dependency-management = { id = "io.spring.dependency-management", version.ref = "spring-dependency-management" }
springdoc-openapi = { id = "org.springdoc.openapi-gradle-plugin", version.ref = "springdoc-plugin" }
vaadin = { id = "com.vaadin", version.ref = "vaadin" }

[Artur-]

The LUMO_SUCCESS style is related to Lumo

[mustafaguc]

which theme name do i need to specify for "warning", "success", "error" etc. states ? I could not find Auro.SUCCESS or similar things. i've tried

Notification.show("Clicked!", 3000, Notification.Position.TOP_CENTER).addThemeName("danger") // or success, warning etc.

but it didn't work @Artur-

[mustafaguc]

i've managed to make it work by adding attached css file and loading it thru @StyleSheet annotation

vaadin-notification.css

[web-padawan]

Aura theme doesn't support color variants for Notification yet. This can be changed in a future version.

[jouni]

The plan is to support accent color variants for notification similarly as for other components, by using the .aura-accent-* class names.

But for that to work, we need to add new API that allows you to define a class name for individual notifications (#10722). Currently you can only set a custom theme attribute for them.

[web-padawan]

There is overlayClass API that allows CSS class name to be set on vaadin-notification-card elements.

[jouni]

Here’s what you can expect the notifications to look like (icon, button and layout are not part of the component, those are for the app to manage). Any icons in the notification would be colored automatically with the accent color.

And you can of course apply variants and color classes on the buttons within a notification: