Other color for Lumo

I’m not sure how to use lumo in my java application.

How can I leave just one specific button in red?

btnScope.getElement().setAttribute("color", "#FF0000");

result:

<vaadin-button color="#FF0000" tabindex="0" role="button" style="align-self: flex-end;">Scope</vaadin-button>

but not run.

I did not find a simple tutorial, nor the names used in the lumo to know what to set.

yourButton.getElement().setAttribute(“theme”, " string1 string2");
string1 can be : error(red), success(green), contrast(black) or nothing (blue)
string2 can be : primary, secondary or tertiary

Useful notice: if you want to have a button with an Icon only, use “icon string1 string2”

:smiley:

Hi Fabiano

In order to set a style of an element, use this method:

btnScope.getStyle().set("color", "#FF0000");

result:

<vaadin-button tabindex="0" role="button" style="color: #FF0000; align-self: flex-end;">Scope</vaadin-button>

Hello,

Thanks, with these examples it is very simple to understand.

Where is this documentation or examples that I can not find at all.

It is documented [here]
(https://vaadin.com/docs/flow/element-api/tutorial-dynamic-styling.html) and [here]
(https://vaadin.com/docs/v12/flow/element-api/tutorial-properties-attributes.html)

An important detail about the component.getStyle() method is that it’s actually only a short form of component.getElement().getStyle(). So your approach was not too far off since you tried to make changes on the element too :slight_smile:

Thank you, that’s what I was looking for.