Docs

Docs

Base Styles

Base Styles Reference

The default, un-themed look and feel of Vaadin components is defined by the base styles. They make the components functional with minimal visual appearance. The base styles support light and dark color schemes and Windows High Contrast Mode.

If your visual design is quite close to either the Lumo or the Aura theme, it’s best to build your theme on top of either of them. But if your design is more custom, the base styles are a good starting point for a completely custom theme.

See the component documentation pages for component-specific custom property listings (for example, see Button styling).

Color

The base style colors support light and dark color schemes by default. Keep that in mind when creating a custom theme, if you want to support it or not. To support both, use the light-dark() function when you override any base style color properties.

Similarly, the base styles support Windows High Contrast Mode out of the box. As long as your custom theme uses the base style custom properties to style components, that feature still works regardless of any other customizations you do to your theme colors.

Text Color

--vaadin-text-color

The main text color used in components.

--vaadin-text-color-secondary

A secondary text color, with at least 4.5:1 contrast ratio with the main background color. Computed from --vaadin-text-color by default.

--vaadin-text-color-disabled

Text color for disabled text. Computed from --vaadin-text-color by default.

Border Color

--vaadin-border-color

A more prominent border color, with at least 3:1 contrast ratio with the main background color. Computed from --vaadin-text-color by default.

--vaadin-border-color-secondary

A border color with less contrast, for non-essential borders. Computed from --vaadin-text-color by default.

Background Color

--vaadin-background-color

The base background color, used for content areas.

--vaadin-background-container

Background for “containers”, buttons, toolbars, notifications, and highlighted content areas. Computed from --vaadin-text-color and --vaadin-background-color by default.

--vaadin-background-container-strong

A more prominent variant of the container background. Computed from --vaadin-text-color and --vaadin-background-color by default.

Gap

The gap variables are typically used to control the space between elements in flex and grid layouts, ensuring visual harmony and predictable rhythm throughout the UI.

--vaadin-gap-xs

Extra-small gap for subtle spacing. For example, the gap between buttons in a toolbar.

--vaadin-gap-s

Small gap for compact layouts. For example, the gap between an icon and related text label.

--vaadin-gap-m

Medium gap for standard spacing needs. For example, padding within a toolbar.

--vaadin-gap-l

Large gap for more generous separation. For example, gap between form fields in a layout.

--vaadin-gap-xl

Extra-large gap for spacious layouts.

Padding

The padding variables are commonly applied to components, containers, and layout wrappers to ensure consistent cushioning and readable, well-balanced UI structures.

--vaadin-padding-xs

Extra-small padding for tight, minimal content spacing.

--vaadin-padding-s

Small padding for compact component layouts.

--vaadin-padding-m

Medium padding for standard, comfortable spacing.

--vaadin-padding-l

Large padding for more open, roomy content areas.

--vaadin-padding-xl

Extra-large padding for spacious, prominent layouts.

--vaadin-padding-inline-container, --vaadin-padding-block-container

The inline (i.e., horizontal) and block (i.e., vertical) padding of a “container”, which is expected to contain a single line of text together with an optional icon and a badge. For example, buttons, text inputs, overlay list items, and other navigation items. The block padding is smaller than the inline padding by default, compensating for the line height of the text, to create the illusion of unified padding around the container.

Radius

Note
Always use a unit when setting these property values to zero.
These properties are used in CSS calc() functions and require a unit when setting the value to zero, e.g., 0px.
--vaadin-radius-s

Border radius for small UI controls, that should not turn into circles or pills.

--vaadin-radius-m

The default border radius of most components.

--vaadin-radius-l

Border radius for larger containers, that contain other components, such as cards and dialogs.

Focus Ring

--vaadin-focus-ring-color

The color of the focus outline when using the Tab key to navigate the UI.

--vaadin-focus-ring-width

The width of the focus outline when using the Tab key to navigate the UI.

Cursor

--vaadin-clickable-cursor

Mouse cursor for clickable elements, i.e., buttons. You can override this to default if you wish to follow a more OS-native style, where buttons usually don’t show the pointer cursor.

--vaadin-disabled-cursor

Cursor shown when hovering over disabled UI elements.

Icons

--vaadin-icon-size

The size of an icon, how much space it reserves from the layout.

--vaadin-icon-visual-size

The visual size of an icon within its own container. Useful for fine-tuning the size without affecting layout or alignment.

--vaadin-icon-stroke-width

Set the stroke width of an SVG icon (rendered inline in the shadow DOM of <vaadin-icon>). Doesn’t affect mask-image-based icons (base styles) or font-based icons.