> Markdown version of [Component Variants](https://vaadin.com/docs/v14/ds/customization/component-variants). Section index: [llms.txt](https://vaadin.com/docs/v14/ds/llms.txt)

# 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:

```java
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.

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

## <a id="variant-inheritance"></a>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, [Combo Box](https://vaadin.com/docs/v14/ds/components/combo-box.md) contains a [Text Field](https://vaadin.com/docs/v14/ds/components/text-field.md) in its shadow DOM, so theme variants applied to a Combo Box are automatically passed down to the Text Field inside. This means that you can apply Text Field variants to a Combo Box even though Combo Box doesn’t have any variants of its own.

```java
ComboBox cb = new ComboBox("Small Combo Box");

// Components without their own theme variant API have to
// use a different syntax for applying them:
cb.getThemeList().add(TextFieldVariant.LUMO_SMALL.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](https://vaadin.com/docs/v14/ds/components/accordion.md#theme-variants).

## <a id="custom-variants"></a>Custom Variants

You can define your own component theme variants using component-specific style sheets in a [custom theme](https://vaadin.com/docs/v14/ds/customization/custom-theme.md).

`vaadin-button.css`

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

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

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

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

See [Styling Components](https://vaadin.com/docs/v14/ds/customization/styling-components.md) to learn how to target the internal parts of Vaadin components.

`33385A3B-ECC8-4E61-A821-C5208D92D952`