Docs

Docs

Button

Styling API reference for the Button components.

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 Lumo Style Properties for more information on style properties.

Common Properties

Feature Property Default Value

Background

--vaadin-button-background

--lumo-contrast-5pct

Text Color

--vaadin-button-text-color

--lumo-primary-text-color

Font Weight

--vaadin-button-font-weight

500

Font Size

--vaadin-button-font-size

--lumo-font-size-m

Border

--vaadin-button-border

none

Border Radius

--vaadin-button-border-radius

--lumo-border-radius-m

Padding

--vaadin-button-padding

0 var(--vaadin-button-height) / 3 + var(--lumo-border-radius-m) / 2

Margin

--vaadin-button-margin

--lumo-space-xs 0

Height

--vaadin-button-height

--lumo-size-m

Min-Width

--vaadin-button-min-width

var(--vaadin-button-height) * 2

Primary Button

Feature Property Default Value

Background

--vaadin-button-primary-background

--lumo-primary-color

Text Color

--vaadin-button-primary-text-color

--lumo-primary-contrast-color

Font Weight

--vaadin-button-primary-font-weight

600

Border

--vaadin-button-primary-border

none

Tertiary Button

Feature Property Default Value

Background

--vaadin-button-tertiary-background

transparent !important

Text Color

--vaadin-button-tertiary-text-color

--lumo-primary-text-color

Font Weight

--vaadin-button-tertiary-font-weight

500

Border

--vaadin-button-tertiary-border

none

Padding

--vaadin-button-tertiary-padding

0 var(--vaadin-button-height) / 6

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.

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

Style Variants

Primary

vaadin-button[theme~="primary"]

Secondary (default)

vaadin-button:not([theme])

Tertiary

vaadin-button[theme~="tertiary"]

Tertiary Inline

vaadin-button[theme~="tertiary-inline"]

Icon-Only

vaadin-button[theme~="icon"]

Small

vaadin-button[theme~="small"]

Large

vaadin-button[theme~="large"]

Contrast

vaadin-button[theme~="contrast"]

Success

vaadin-button[theme~="success"]

Danger / Error

vaadin-button[theme~="error"]

Warning

vaadin-button[theme~="warning"]