Login Component Button Color

Hi, is there a way to change the color of the button inside the login component, like the way that it’s already used in regular buttons?

I’m not sure there’s an official API for that. You might be able give your login-form a CSS classname and override the CSS variable used for the button color:

.my-login {
  --_lumo-button-primary-background-color: red;
}

@resilient-meerkat or @useful-whale will likely have a more proper answer later :smile:

Yes, your suggestion worked, tks :slightly_smiling_face:

Hi, after this question I gained other questions relating colors, in vaadin login form how can I change the color from the labels of the username and password and the forgot password button, in vaadin upload how can I change the color of the button and in vaadin text field how can I change the color of the label?

I’m asking this question because I’m trying to do a college project in Hilla with red and black colors

Instead of changing the colors of individual components, I would suggest you look into changing the high-level colors that are a base for all components. That will give you a more cohesive result. You can play around with colors on https://start.vaadin.com/ if you are logged in. You can copy over the CSS variables from the generated project into your project.

And if you want to tweak colors in an app you already have, here’s a list of all color properties: https://vaadin.com/docs/latest/styling/lumo/design-tokens/color
For example, if you want all things blue to be red instead, you tweak the values of the --lumo-primary-*** properties. You can use any valid css color values for them, not just hsls like the defaults.

One critical note: any CSS custom properties which start with an underscore (meaning --_) are not part of the public styling API, and can be renamed or removed in any release. So don’t rely on those in the long term.

Ok, tks