Version:

Install ​

shell
npm i @vaadin/button}

Import ​

javascript
import '@vaadin/button';

Variants ​

Primary ​

html
<vaadin-button theme="primary">Primary</vaadin-button>
javascript
button.addEventListener(e => console.log(e));

Secondary ​

html
<vaadin-button>Secondary</vaadin-button>

Tertiary ​

html
<vaadin-button theme="tertiary">Tertiary</vaadin-button>

Success ​

html
<vaadin-button theme="success">Success</vaadin-button>

Error / Danger ​

html
<vaadin-button theme="error">Error</vaadin-button>

Disabled ​

html
<vaadin-button disabled>Disabled</vaadin-button>

Icon ​

See icon for an explanation of how to install the icon component and symbols. Alternatively use span.

html
<vaadin-button theme="icon">
    <span theme="icon" role="img" aria-label="add aria label">add</span>
</vaadin-button>

WARNING

Warning: Do not use aria labels on icon and button at the same time, as they both will be read out!. Same goes for grid cells, when they contain actions.

Prefix Icon ​

html
<vaadin-button>
    <span theme="icon" role="img" slot="prefix">chevron_left</span>
    <span>Backward</span>
</vaadin-button>

Suffix Icon ​

html
<vaadin-button>
    <span>Forward</span>
    <span theme="icon" role="img" slot="suffix">chevron_right</span>
</vaadin-button>

Icon unstyled ​

html
<vaadin-button theme="icon unstyled">
    <span theme="icon" role="img">add</span>
</vaadin-button>