ToggleButton for Flow 3.0.0 (Vaadin 24.3.10): Problem with applying custom css

Hello everyone,

I want to use ToggleButton for Flow with Vaadin 24, the problem is: css style does not apply.

If I write the css code with my browser development toll, it does something.

Does anyone have a clue why the css file does not apply?
Thank you for answers.

Which ToggleButton are we talking about? :slight_smile:

To create a toggle button, all you need to do is manage the aria-pressed state.


public class ToggleButton extends Button {
    private boolean pressed = false;

    public ToggleButton(String text) {
        addClickListener(e -> toggle());

    private void toggle() {
        pressed = !pressed;

    private void updateAriaPressedAttribute() {
        getElement().setAttribute("aria-pressed", String.valueOf(pressed));


vaadin-button[aria-pressed="true"] {

Hello @anezthes

Than you for replying, we are talking about this component

How are you trying to style it?
Here’s how I change the enabled background to red

vaadin-checkbox[theme~="toggle-button"][checked]::part(checkbox) {
    background-color: red;

That is the point: I am not trying to style it.
css provided by this component is just not being applied

Hard to determine what’s at fault here, since it works fine on my machine.
All I can suggest is to perform the usual
mvn clean install

You could also try adding the following to your, but that shouldn’t really have a different effect if you run the mvn command above.

If none of that works, you can try creating a new project from and adding that add-on there to verify it works there. If it does, compare its configuration to your project and adjust accordingly, if it doesn’t then it might be something else on your machine (might be something wrong with Node or some permissions).

I found a workaround by adding @CssImport("./generated/jar-resources/styles/vaadin-checkbox.css") in my main view class

I am upgrading to vaadin 24 from vaadin 14, the toggle button looks different, the inner circle looks big. Is it possible to fix this?

I didn’t yet check if there is some issue with the ToggleButton addon in the latest Vaadin versions.


Here’s an alternative for the addon that simply styles the checkbox to look like a toggle switch. Originally written by @anezthes, kudos to him.

The styles can be placed in styles.css or anywhere in the lightDOM (not in /components).

vaadin-checkbox[theme~="switch"]::part(checkbox) {
    border-radius: 9999px;
    width: var(--lumo-size-m);

vaadin-checkbox[theme~="switch"]::part(checkbox)::after {
    content: "";
    height: calc(var(--lumo-size-m) / 3);
    background-color: var(--lumo-secondary-text-color);
    border-radius: 9999px;
    inset: 0;
    margin: calc(var(--lumo-size-m) / 12);
    opacity: 1;
    transition: transform 0.2s;
    width: calc(var(--lumo-size-m) / 3);

vaadin-checkbox[theme~="switch"][checked]::part(checkbox)::after {
    background-color: var(--lumo-primary-contrast-color);
    transform: translateX(calc(var(--lumo-size-m) / 2));

In java you’ll need to apply the “switch” theme to checkbox.

Checkbox toggle = new Checkbox("Toggle switch");
1 Like

It seems like you’re not using the 3.0.0 version which is compatible with V24.

Hello @juuso.kantonen, thank you for your provided css.
Do you know how to select the div with vaadin-checkbox-container class through shadow dom to style it?

I want to align center the toggle and the label

The vaadin-checkbox-container doesn’t have a part name and cannot be targeted without shadowDOM styling. The checkbox does have a part and you can fix the alignment with

vaadin-checkbox[theme~="switch"]::part(checkbox) {
    align-self: center;

The same works for the 3.0.0 version of the addon, but theme name is toggle-button instead of switch.

1 Like

Thank you very much!

Yes I was using 3.0.0 component only.


vaadin-checkbox id=“apNotificationsToggleButton” theme=“toggle-button” alt=“toggle button” aria-label=“theme toggle” style=“padding-left: 25px;”>Toggle Here</vaadin-checkbox

As @Herbis said, other machines with the same project works well with css reading.
The problem is all my own so

Thanks This solution worked, but the color of the inner circle in the toggle button can this be changed?

Yes, it’s the background-color of the ::after pseudo-element.

vaadin-checkbox[theme~="switch"]::part(checkbox)::after {
    background-color: red;

vaadin-checkbox[theme~="switch"][checked]::part(checkbox)::after {
    background-color: green;