Documentation versions (currently viewingVaadin 23)

You are viewing documentation for Vaadin 23. View latest documentation

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");

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.