Version:

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-button-flow</artifactId>
</dependency>

Import ​

java
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;

Variants ​

Primary ​

java
Button button = new Button("Primary", e -> System.out.println("Button clicked"));
button.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

Secondary ​

java
Button button = new Button("Secondary");

Tertiary ​

java
Button button = new Button("Tertiary");
button.addThemeVariants(ButtonVariant.LUMO_TERTIARY);

Success ​

java
Button button = new Button("Tertiary");
button.addThemeVariants(ButtonVariant.LUMO_SUCCESS);

Error / Danger ​

java
Button button = new Button("Tertiary");
button.addThemeVariants(ButtonVariant.LUMO_ERROR);

Disabled ​

java
Button button = new Button("Tertiary");
button.setEnabled(false);

Icon ​

See icon for an explanation of how to install the icon component and symbols. Alternatively use span.

java
Button button = new Button(new Icon(MaterialSymbol.SymbolAdd, "add aria label"));

WARNING

Warning: Do not use aria labels on icon and button at the same time, as they both will be read out!. Same goes for grid cells, when they contain actions.

Prefix Icon ​

java
Button button = new Button("Backward");
button.setIcon(new Icon(MaterialSymbol.SymbolChevronLeft));

Suffix Icon ​

java
Button button = new Button("Forward");
button.setIcon(new Icon(MaterialSymbol.SymbolChevronRight));
button.setIconAfterText(true);

Icon unstyled ​

java
Button button = new Button(new Icon(MaterialSymbol.SymbolAdd));
button.addThemeNames(ButtonVariant.LUMO_ICON.getVariantName(), "unstyled");