Valo

Buttons

The additional theme styles can be applied together, with the exception of styles inside a single section which are mutually exclusive.

For example, you can combine the primary style with the small, icon and success styles, but you can’t combine primary with tertiary or success with danger.

Types

Disabled

Icons

Colors

Sizes


Styling API

Custom properties

--valo-button-text-color: var(--valo-primary-text-color)
--valo-button-background-color: var(--valo-tint-80pct) for light, var(--valo-tint-5pct) for dark
--valo-button-border-radius: var(--valo-border-radius)
--valo-primary-button-font-weight: 600

Shadow parts and states

See the API documentation for vaadin-button.


Looking for more help?

Read the customization instructions to learn how to customize the component styles.