Documentation

Documentation

Component Variants

Many Vaadin components have so-called theme variants that provide different styles for the component. These are defined as part of the built-in Lumo and Material themes, and documented for each component.

For example, Button has a "primary" variant, which can be used as follows:

Button btn = new Button("Primary variant");
btn.addThemeVariants(ButtonVariant.LUMO_PRIMARY);

Multiple theme variants can be simultaneously applied to a component, although not all variants are designed to be used together.

Button btn = new Button("Primary + Small");
btn.addThemeVariants(ButtonVariant.LUMO_PRIMARY, ButtonVariant.LUMO_SMALL);

Variant Inheritance

Theme variants differ from CSS class names mainly in that they are automatically applied to sub-components within the shadow DOM of the component to which they are applied. For example, CRUD contains a Grid in its shadow DOM, so theme variants applied to a CRUD are automatically passed down to the Grid inside. This means that you can apply Grid variants to a CRUD, even though the variants aren’t defined in the CRUD theme.

Crud<Person> crud = new Crud<>();

// Apply a Grid theme variant to the CRUD
crud.getElement().getThemeList().add(GridVariant.LUMO_ROW_STRIPES.getVariantName());

Variant inheritance only works for sub-components in the shadow DOM, not with regular “light DOM” children of a component. For example, Accordion Panel components inside an Accordion need to have their variants applied to each panel.

Custom Variants

You can define your own component theme variants using component-specific style sheets in a custom theme.

:host([theme~="rounded"]) {
  border-radius: 1em;
}

You can then apply the theme variant similarly to the built-in variants:

Button btn = new Button("Rounded");
btn.getThemeList().add("rounded");

These are inherited to sub-components similarly to the built-in variants.

See Styling Components to learn how to target the internal parts of Vaadin components.

59B1D952-A932-4AA1-BFA6-B7831FFFF18C