Custom Component Variants

Many Vaadin components have built-in theme variants that provide different styles for the component. Theme variants are similar to CSS class names, but are automatically inherited by sub-components within the component to which they are applied.

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 in a similar way to the built-in variants.

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

59B1D952-A932-4AA1-BFA6-B7831FFFF18C