# 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](../icon/flow.md) 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>
```