Button Styling

Styling API reference for the Button components.

Style Variants
Additional Lumo Variants
Style Properties
CSS Selectors

Style Variants

The following variants can be used to distinguish between actions of different importance in the UI:

Variant Description Supported by

Variant	Description	Supported by
`primary`	Recommended for the most important action in a view	Aura, Lumo
`tertiary`	Recommended for lower-importance actions	Aura, Lumo
`tertiary-inline`	Recommended for embedding a Button as part of text content	Lumo
`icon`	Used to reduce the white space on either side of the icon	Lumo
`small`	Reduces the button size	Aura, Lumo
`large`	Increases the button size	Aura, Lumo
`contrast`	Recommended as an additional color option	Lumo
`success`	Recommended as an additional color option	Aura, Lumo
`error`	Recommended for dangerous or irreversible actions	Aura, Lumo
`warning`	Recommended for actions related to warnings	Aura, Lumo

primary

Recommended for the most important action in a view

Aura, Lumo

tertiary

Recommended for lower-importance actions

Aura, Lumo

tertiary-inline

Recommended for embedding a Button as part of text content

Lumo

icon

Used to reduce the white space on either side of the icon

Lumo

small

Reduces the button size

Aura, Lumo

large

Increases the button size

Aura, Lumo

contrast

Recommended as an additional color option

Lumo

success

Recommended as an additional color option

Aura, Lumo

error

Recommended for dangerous or irreversible actions

Aura, Lumo

warning

Recommended for actions related to warnings

Aura, Lumo

Open in a
new tab

Source code

ButtonStyles.javapackage com.vaadin.demo.component.button;

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.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("button-styles")
public class ButtonStyles extends Div {
    public ButtonStyles() {
        // tag::snippet[]
        Button primaryButton = new Button("Primary");
        primaryButton.addThemeVariants(ButtonVariant.PRIMARY);

        Button secondaryButton = new Button("Secondary");

        Button tertiaryButton = new Button("Tertiary");
        tertiaryButton.addThemeVariants(ButtonVariant.TERTIARY);
        // end::snippet[]

        HorizontalLayout horizontalLayout = new HorizontalLayout(primaryButton,
                secondaryButton, tertiaryButton);
        add(horizontalLayout);
    }

}
button-styles.tsximport React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';

function Example() {
  return (
    <HorizontalLayout theme="spacing">
      {/* tag::snippet[] */}
      <Button theme="primary">Primary</Button>
      <Button theme="secondary">Secondary</Button>
      <Button theme="tertiary">Tertiary</Button>
      {/* end::snippet[] */}
    </HorizontalLayout>
  );
}

button-styles.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('button-styles')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-horizontal-layout theme="spacing">
        <!-- tag::snippet[] -->
        <vaadin-button theme="primary">Primary</vaadin-button>
        <vaadin-button theme="secondary">Secondary</vaadin-button>
        <vaadin-button theme="tertiary">Tertiary</vaadin-button>
        <!-- end::snippet[] -->
      </vaadin-horizontal-layout>
    `;
  }
}

Variant	Usage Recommendation
Primary	This is the most important action in a view or in part of one. It’s the main closure or continuation action (e.g., Save) in a form or dialog. Avoid presenting the user with more than one at any time.
Secondary	This is the default style recommended for most actions. It can be the alternate or negative closure actions (e.g., Cancel) in a form or dialog.
Tertiary	These are lower-importance actions — especially in parts of the UI with less space, such as cards, or repeated actions for items in lists, tables, etc. Caution: this can be mistaken for non-interactive text.

Variant

Usage Recommendation

Primary

This is the most important action in a view or in part of one. It’s the main closure or continuation action (e.g., Save) in a form or dialog. Avoid presenting the user with more than one at any time.

Secondary

This is the default style recommended for most actions. It can be the alternate or negative closure actions (e.g., Cancel) in a form or dialog.

Tertiary

These are lower-importance actions — especially in parts of the UI with less space, such as cards, or repeated actions for items in lists, tables, etc. Caution: this can be mistaken for non-interactive text.

Danger & Error Variants

This is a style for distinguishing actions related to dangers, warnings, or errors. Dangerous actions would be those that lose or destroy data.

Open in a
new tab

Source code

ButtonError.javapackage com.vaadin.demo.component.button;

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.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("button-error")
public class ButtonError extends Div {
    public ButtonError() {
        // tag::snippet[]
        Button primaryButton = new Button("Primary");
        primaryButton.addThemeVariants(ButtonVariant.PRIMARY,
                ButtonVariant.ERROR);

        Button secondaryButton = new Button("Secondary");
        secondaryButton.addThemeVariants(ButtonVariant.ERROR);

        Button tertiaryButton = new Button("Tertiary");
        tertiaryButton.addThemeVariants(ButtonVariant.TERTIARY,
                ButtonVariant.ERROR);
        // end::snippet[]

        HorizontalLayout horizontalLayout = new HorizontalLayout(primaryButton,
                secondaryButton, tertiaryButton);
        add(horizontalLayout);
    }

}
button-error.tsximport React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';

function Example() {
  return (
    <HorizontalLayout theme="spacing">
      {/* tag::snippet[] */}
      <Button theme="primary error">Primary</Button>
      <Button theme="secondary error">Secondary</Button>
      <Button theme="tertiary error">Tertiary</Button>
      {/* end::snippet[] */}
    </HorizontalLayout>
  );
}

button-error.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('button-error')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-horizontal-layout theme="spacing">
        <!-- tag::snippet[] -->
        <vaadin-button theme="primary error">Primary</vaadin-button>
        <vaadin-button theme="secondary error">Secondary</vaadin-button>
        <vaadin-button theme="tertiary error">Tertiary</vaadin-button>
        <!-- end::snippet[] -->
      </vaadin-horizontal-layout>
    `;
  }
}

Primary danger buttons should only be used when a dangerous action is the most likely action. An example of this would be the affirmative Delete action in a deletion confirmation dialog. Secondary and Tertiary variants can be used for actions related to current errors, such as resolving them or viewing their details.

Warning Variant

This is a style for distinguishing actions related to warnings: for example, in dialogs that are intended to warn the user, or to provide information that requires extra attention.

Open in a
new tab

Source code

ButtonWarning.javapackage com.vaadin.demo.component.button;

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.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("button-warning")
public class ButtonWarning extends Div {
    public ButtonWarning() {
        // tag::snippet[]
        Button primaryButton = new Button("Primary");
        primaryButton.addThemeVariants(ButtonVariant.PRIMARY,
                ButtonVariant.WARNING);

        Button secondaryButton = new Button("Secondary");
        secondaryButton.addThemeVariants(ButtonVariant.WARNING);

        Button tertiaryButton = new Button("Tertiary");
        tertiaryButton.addThemeVariants(ButtonVariant.TERTIARY,
                ButtonVariant.WARNING);
        // end::snippet[]

        HorizontalLayout horizontalLayout = new HorizontalLayout(primaryButton,
                secondaryButton, tertiaryButton);
        add(horizontalLayout);
    }

}
button-warning.tsximport React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';

function Example() {
  return (
    <HorizontalLayout theme="spacing">
      {/* tag::snippet[] */}
      <Button theme="primary warning">Primary</Button>
      <Button theme="secondary warning">Secondary</Button>
      <Button theme="tertiary warning">Tertiary</Button>
      {/* end::snippet[] */}
    </HorizontalLayout>
  );
}

button-warning.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('button-warning')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-horizontal-layout theme="spacing">
        <!-- tag::snippet[] -->
        <vaadin-button theme="primary warning">Primary</vaadin-button>
        <vaadin-button theme="secondary warning">Secondary</vaadin-button>
        <vaadin-button theme="tertiary warning">Tertiary</vaadin-button>
        <!-- end::snippet[] -->
      </vaadin-horizontal-layout>
    `;
  }
}

Success Variant

This is a style for distinguishing actions related to successful outcomes: for example, confirming a completion or approving a request.

Open in a
new tab

Source code

ButtonSuccess.javapackage com.vaadin.demo.component.button;

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.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("button-success")
public class ButtonSuccess extends Div {
    public ButtonSuccess() {
        // tag::snippet[]
        Button primaryButton = new Button("Primary");
        primaryButton.addThemeVariants(ButtonVariant.PRIMARY,
                ButtonVariant.SUCCESS);

        Button secondaryButton = new Button("Secondary");
        secondaryButton.addThemeVariants(ButtonVariant.SUCCESS);

        Button tertiaryButton = new Button("Tertiary");
        tertiaryButton.addThemeVariants(ButtonVariant.TERTIARY,
                ButtonVariant.SUCCESS);
        // end::snippet[]

        HorizontalLayout horizontalLayout = new HorizontalLayout(primaryButton,
                secondaryButton, tertiaryButton);
        add(horizontalLayout);
    }

}
button-success.tsximport React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';

function Example() {
  return (
    <HorizontalLayout theme="spacing">
      {/* tag::snippet[] */}
      <Button theme="primary success">Primary</Button>
      <Button theme="secondary success">Secondary</Button>
      <Button theme="tertiary success">Tertiary</Button>
      {/* end::snippet[] */}
    </HorizontalLayout>
  );
}

button-success.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('button-success')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-horizontal-layout theme="spacing">
        <!-- tag::snippet[] -->
        <vaadin-button theme="primary success">Primary</vaadin-button>
        <vaadin-button theme="secondary success">Secondary</vaadin-button>
        <vaadin-button theme="tertiary success">Tertiary</vaadin-button>
        <!-- end::snippet[] -->
      </vaadin-horizontal-layout>
    `;
  }
}

Tip	Customize Default Button Colors The standard Button colors can be adjusted using the Lumo color properties or the Aura color properties. Therefore, these variants shouldn’t be used to replace standard buttons only to achieve a different color.

Size Variants

The following size variants are available for Button instances whose size needs to be different from the default:

Open in a
new tab

Source code

ButtonSizes.javapackage com.vaadin.demo.component.button;

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.FlexComponent;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.router.Route;

@Route("button-sizes")
public class ButtonSizes extends Div {
    public ButtonSizes() {
        // tag::snippet[]
        Button largeButton = new Button("Large");
        largeButton.addThemeVariants(ButtonVariant.LARGE);

        Button normalButton = new Button("Normal");

        Button smallButton = new Button("Small");
        smallButton.addThemeVariants(ButtonVariant.SMALL);
        // end::snippet[]

        HorizontalLayout horizontalLayout = new HorizontalLayout(largeButton,
                normalButton, smallButton);
        horizontalLayout.setAlignItems(FlexComponent.Alignment.BASELINE);
        add(horizontalLayout);
    }

}
button-sizes.tsximport React from 'react';
import { Button } from '@vaadin/react-components/Button.js';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';

function Example() {
  return (
    <HorizontalLayout theme="spacing" style={{ alignItems: 'baseline' }}>
      {/* tag::snippet[] */}
      <Button theme="large">Large</Button>
      <Button theme="normal">Normal</Button>
      <Button theme="small">Small</Button>
      {/* end::snippet[] */}
    </HorizontalLayout>
  );
}

button-sizes.tsimport '@vaadin/button';
import '@vaadin/horizontal-layout';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('button-sizes')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <vaadin-horizontal-layout theme="spacing" style="align-items: baseline">
        <!-- tag::snippet[] -->
        <vaadin-button theme="large">Large</vaadin-button>
        <vaadin-button theme="normal">Normal</vaadin-button>
        <vaadin-button theme="small">Small</vaadin-button>
        <!-- end::snippet[] -->
      </vaadin-horizontal-layout>
    `;
  }
}

Variant	Usage Recommendation
Large	For important call-to-action buttons — where more emphasis is needed.
Normal	Default size.
Small	Compact option for cramped parts of the UI — where a Tertiary variant isn’t deemed appropriate.

Variant

Usage Recommendation

Large

For important call-to-action buttons — where more emphasis is needed.

Normal

Default size.

Small

Compact option for cramped parts of the UI — where a Tertiary variant isn’t deemed appropriate.

Tip	Customize Default Button Size Size variants should only be used in special cases. For Lumo, see Size and Space for details on how to change the default button size.

Additional Lumo Variants

The following variants are only available in the Lumo theme.

Tertiary Inline Variant

The Tertiary Inline variant omits all white space around the label. This can be useful for embedding a Button as part of text content or another component. It shouldn’t be confused with a link.

Open in a
new tab

Source code

ButtonTertiaryInline.javapackage com.vaadin.demo.component.button;

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.router.Route;

@Route("button-tertiary-inline")
public class ButtonTertiaryInline extends Div {
    public ButtonTertiaryInline() {
        // tag::snippet[]
        Button tertiaryInlineButton = new Button("Tertiary inline");
        tertiaryInlineButton
                .addThemeVariants(ButtonVariant.LUMO_TERTIARY_INLINE);
        // end::snippet[]

        add(tertiaryInlineButton);
    }

}
button-tertiary-inline.tsximport React from 'react';
import { Button } from '@vaadin/react-components/Button.js';

function Example() {
  return (
    // tag::snippet[]
    <Button theme="tertiary-inline">Tertiary inline</Button>
    // end::snippet[]
  );
}

button-tertiary-inline.tsimport '@vaadin/button';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('button-tertiary-inline')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-button theme="tertiary-inline">Tertiary inline</vaadin-button>
      <!-- end::snippet[] -->
    `;
  }
}

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…} selector. See Component Style Properties for more information on style properties.

Common Properties

Property Supported by

Property	Supported by
`--vaadin-button-background`	Aura, Lumo
`--vaadin-button-border`	Lumo
`--vaadin-button-border-color`	Aura
`--vaadin-button-border-radius`	Aura, Lumo
`--vaadin-button-border-width`	Aura
`--vaadin-button-font-size`	Aura, Lumo
`--vaadin-button-font-weight`	Aura, Lumo
`--vaadin-button-gap`	Aura
`--vaadin-button-height`	Aura, Lumo
`--vaadin-button-line-height`	Aura
`--vaadin-button-margin`	Aura, Lumo
`--vaadin-button-min-width`	Lumo
`--vaadin-button-padding`	Aura, Lumo
`--vaadin-button-text-color`	Aura, Lumo

--vaadin-button-background

Aura, Lumo

--vaadin-button-border

Lumo

--vaadin-button-border-color

Aura

--vaadin-button-border-radius

Aura, Lumo

--vaadin-button-border-width

Aura

--vaadin-button-font-size

Aura, Lumo

--vaadin-button-font-weight

Aura, Lumo

--vaadin-button-gap

Aura

--vaadin-button-height

Aura, Lumo

--vaadin-button-line-height

Aura

--vaadin-button-margin

Aura, Lumo

--vaadin-button-min-width

Lumo

--vaadin-button-padding

Aura, Lumo

--vaadin-button-text-color

Aura, Lumo

Primary Button

Feature Property Supported by

Feature	Property	Supported by
Background	`--vaadin-button-primary-background`	Lumo
Text Color	`--vaadin-button-primary-text-color`	Lumo
Font Weight	`--vaadin-button-primary-font-weight`	Lumo
Border	`--vaadin-button-primary-border`	Lumo

Background

--vaadin-button-primary-background

Lumo

Text Color

--vaadin-button-primary-text-color

Lumo

Font Weight

--vaadin-button-primary-font-weight

Lumo

Border

--vaadin-button-primary-border

Lumo

Tertiary Button

Feature Property Supported by

Feature	Property	Supported by
Background	`--vaadin-button-tertiary-background`	Lumo
Text Color	`--vaadin-button-tertiary-text-color`	Lumo
Font Weight	`--vaadin-button-tertiary-font-weight`	Lumo
Border	`--vaadin-button-tertiary-border`	Lumo
Padding	`--vaadin-button-tertiary-padding`	Lumo

Background

--vaadin-button-tertiary-background

Lumo

Text Color

--vaadin-button-tertiary-text-color

Lumo

Font Weight

--vaadin-button-tertiary-font-weight

Lumo

Border

--vaadin-button-tertiary-border

Lumo

Padding

--vaadin-button-tertiary-padding

Lumo

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Important

Not for Shadow DOM

These selectors should be used in styles.css or another stylesheet loaded with the @StyleSheet annotation or the @import CSS rule. They do not work in the shadow DOM of Vaadin components, such as in stylesheets in the components sub-folder or loaded with the @CssImport annotation’s themeFor property.

Root element: vaadin-button

States

Disabled: vaadin-button[disabled]
Focused: vaadin-button[focused]
Keyboard Focused: vaadin-button[focus-ring]
Hovered: vaadin-button:hover
Hover Highlight: vaadin-button:hover::before

Parts

Label: vaadin-button::part(label)
Prefix (e.g., icon) Wrapper: vaadin-button::part(prefix)
Suffix (e.g., icon) Wrapper: vaadin-button::part(suffix)
Icon: vaadin-button > vaadin-icon

Docs

Docs

Button Styling

Style Variants

Danger & Error Variants

Warning Variant

Success Variant

Size Variants

Additional Lumo Variants

Tertiary Inline Variant

Style Properties

Common Properties

Primary Button

Tertiary Button

CSS Selectors

States

Parts