Documentation

You are viewing documentation for Vaadin 23. View latest documentation

Documentation

Components Built-in Variants

Learn how to enable Lumo light, dark, and compact variants. Learn also about the component variants.

Many Vaadin components have built-in variants that can be used to style individual component instances quickly. You can find those variants under each component page in the Vaadin components chapter of the documentation.

For example, the Button component has built-in Primary, Secondary, and Tertiary variants (among others) that you can use to style individual instances of the button. By default, the button is styled with the Secondary variant. You can enable the Primary or Tertiary variant of the button as follows:

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

Button secondaryButton = new Button("Secondary"); // (1)

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

  1. By default, the button is styled with the Secondary variant.

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.

184C9973-ECEC-46C9-A934-3EEBF19F74D7