> Markdown version of [Add Styling](https://vaadin.com/docs/next/building-apps/ui-basics/add-styling). Section index: [llms.txt](https://vaadin.com/docs/next/building-apps/llms.txt)

# Add Styling

Vaadin gives you several ways to style components and elements. This article covers the three most common: theme variants and inline styles, which are pure Java — no CSS needed — and CSS class names, which give you full control through a stylesheet. Wherever possible, the examples use the `--vaadin-*` [base style properties](https://vaadin.com/docs/next/styling/themes/base.md), which work with both the [Aura](https://vaadin.com/docs/next/styling/themes/aura.md) and the [Lumo](https://vaadin.com/docs/next/styling/themes/lumo.md) theme. For utility classes, component style properties, and other advanced techniques, see the [Styling](https://vaadin.com/docs/next/styling.md) documentation.

## <a id="copy-paste-into-your-project"></a>Copy-Paste into Your Project

A self-contained view that demonstrates three styling approaches:

```java
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.router.Route;

@Route("styling-example")
public class StylingExampleView extends VerticalLayout {

    public StylingExampleView() {
        // 1. Theme variant — built-in component style (pure Java)
        Button saveButton = new Button("Save");
        saveButton.addThemeVariants(ButtonVariant.PRIMARY);

        // 2. Inline style — one-off styling (pure Java)
        Div highlight = new Div("Highlighted text");
        highlight.getStyle()
                .setBackground("var(--vaadin-background-container-strong)")
                .setPadding("var(--vaadin-padding-s) var(--vaadin-padding-m)")
                .setBorderRadius("var(--vaadin-radius-m)");

        // 3. CSS class name — styled via styles.css (requires CSS)
        Div banner = new Div("Welcome back!");
        banner.addClassName("info-banner");

        add(saveButton, highlight, banner);
    }
}
```

Add the following CSS to your `styles.css` file for the `.info-banner` class used above:

```css
.info-banner {
    background: var(--vaadin-background-container);
    padding: var(--vaadin-padding-m);
    border-radius: var(--vaadin-radius-m);
}
```

## <a id="theme-variants"></a>Theme Variants

Theme variants are built-in style presets that many Vaadin components support. They are the easiest way to adjust a component’s appearance — one line of Java, no CSS required.

Use `addThemeVariants()` with the variant constants for the component:

```java
Button primary = new Button("Save");
primary.addThemeVariants(ButtonVariant.PRIMARY);
```

You can combine multiple variants. For example, an error primary button:

```java
Button delete = new Button("Delete");
delete.addThemeVariants(
        ButtonVariant.PRIMARY,
        ButtonVariant.ERROR);
```

> **Tip:** Check each component’s documentation for its available variants. For example, see [Button Styling](https://vaadin.com/docs/next/components/button/styling.md).

## <a id="inline-styles"></a>Inline Styles

The `getStyle()` API applies CSS properties directly to a component from Java. Use it for one-off adjustments or styles that change at runtime.

Common CSS properties have dedicated methods, and you can use the generic `set()` method for any property:

```java
Div header = new Div("Dashboard");
header.getStyle()
        .setFontWeight(Style.FontWeight.BOLD)
        .setBackground("var(--vaadin-background-container)")
        .setColor("var(--vaadin-text-color)")
        .set("border-radius", "var(--vaadin-radius-m)");
```

Values like `var(--vaadin-radius-m)` are style properties — CSS custom properties that hold named values for colors, spacing, and other styles. The `--vaadin-`** [base style properties](https://vaadin.com/docs/next/styling/themes/base.md) work with any theme. The [Aura](https://vaadin.com/docs/next/styling/themes/aura.md) and [Lumo](https://vaadin.com/docs/next/styling/themes/lumo/lumo-style-properties.md) themes add their own `--aura-`** and `--lumo-*` properties, for example for accent colors and font sizes, but these only work with the theme that defines them. Using style properties instead of hardcoded values keeps your styles consistent and makes them adapt to dark mode automatically.

> **Note:** Inline styles set through `getStyle()` apply to the root HTML element of the component. For HTML elements (`Div`, `Span`, `Paragraph`, etc.) and layout components (`HorizontalLayout`, `VerticalLayout`), the root element *is* the visible element, so inline styles work as expected. For Vaadin components like `TextField`, `Button`, or `Grid`, the visible parts are inside shadow DOM — inline styles on the root element don’t reach them. To style those components, use theme variants or CSS. See the [Styling](https://vaadin.com/docs/next/styling.md) reference for details.

> **Note:** If the same inline style appears in multiple places, extract it into a CSS class in a stylesheet. Inline styles are harder to find, override, and maintain than stylesheet rules.

## <a id="css-class-names"></a>CSS Class Names

Adding a CSS class name to a component and writing matching styles in a stylesheet is the most flexible approach. It requires writing CSS, but keeps styles reusable and maintainable as your application grows.

Use `addClassName()` or `addClassNames()` in Java:

```java
Div card = new Div();
card.addClassName("product-card");

Span label = new Span("Urgent");
label.addClassNames("status-label", "status-urgent");
```

Then write the matching CSS rules in your [stylesheet](https://vaadin.com/docs/next/styling/stylesheets.md) (typically `styles.css` in `src/main/resources/META-INF/resources`):

```css
.product-card {
    background: var(--vaadin-background-color);
    border: 1px solid var(--vaadin-border-color-secondary);
    border-radius: var(--vaadin-radius-l);
    padding: var(--vaadin-padding-m);
}

.status-label {
    border-radius: var(--vaadin-radius-s);
    padding: var(--vaadin-padding-xs) var(--vaadin-padding-s);
}

.status-urgent {
    color: var(--aura-red-text);
}
```

The base style properties don’t include semantic colors, such as a color for errors, so the `.status-urgent` rule uses a color from Aura, the default theme. With Lumo, use `var(--lumo-error-text-color)` instead.

> **Tip:** Use semantic class names that describe what the element **is**, not how it looks. Prefer `status-urgent` over `red-text` — the visual style can change, but the meaning stays.

## <a id="when-to-style-with-what"></a>When to Style with What

What approach to use depends on *what* you’re styling:

**Styling components** (`TextField`, `Button`, `Grid`, etc.) — Theme variants are the easiest option: one line of Java for built-in presets like primary buttons, small fields, or notification colors. For anything beyond variants, use CSS — see the [Styling](https://vaadin.com/docs/next/styling.md) reference. Inline styles don’t reach component internals because the visible parts are inside shadow DOM.

**Styling HTML elements and layouts** (`Div`, `Span`, `HorizontalLayout`, etc.) — You have the full range of options. Use inline styles for one-off adjustments or dynamic values that change at runtime. Use CSS class names for reusable styles shared across elements. Use utility classes for a Java-only alternative to writing CSS.

> **Tip:** The [Styling](https://vaadin.com/docs/next/styling.md) reference covers more advanced techniques when you’re ready — including utility classes, component style properties, and shadow DOM styling.

## <a id="beyond-the-basics"></a>Beyond the Basics

This article covers the core styling approaches, but Vaadin’s styling system offers more:

- **Utility classes** — apply styles from Java using [Tailwind CSS](https://vaadin.com/docs/next/styling/utility-classes.md#tailwind) class names, or `LumoUtility` constants if you use the Lumo theme. A Java-only alternative to writing CSS classes.

- **Component style properties** — customize component appearance with `--vaadin-*` properties without writing complex CSS selectors

- **Theme properties** — change the look of your entire application with `--aura-`** or `--lumo-`** properties

- **Styling component internals** — target internal elements with `::part()` selectors for deep customization

- **Lazy-loading and scoping stylesheets** — control when and where stylesheets are loaded

See the [Styling](https://vaadin.com/docs/next/styling.md) documentation for details on these features.