---
title: Button
description: Button
element: vaadin-button
---

## Description

`<vaadin-button>` is an accessible and customizable button that allows users to perform actions.

```html
<vaadin-button>Press me</vaadin-button>
```

### Styling

The following shadow DOM parts are available for styling:

Part name | Description
----------|-------------
`label`   | The label (text) inside the button.
`prefix`  | A slot for content before the label (e.g. an icon).
`suffix`  | A slot for content after the label (e.g. an icon).

The following state attributes are available for styling:

Attribute      | Description
---------------|-------------
`active`       | Set when the button is pressed down, either with mouse, touch or the keyboard
`disabled`     | Set when the button is disabled
`focus-ring`   | Set when the button is focused using the keyboard
`focused`      | Set when the button is focused
`has-tooltip`  | Set when the button has a slotted tooltip

The following custom CSS properties are available for styling:

Custom CSS property                |
:----------------------------------|
| `--vaadin-button-background`     |
| `--vaadin-button-border-color`   |
| `--vaadin-button-border-radius`  |
| `--vaadin-button-border-width`   |
| `--vaadin-button-font-size`      |
| `--vaadin-button-font-weight`    |
| `--vaadin-button-gap`            |
| `--vaadin-button-height`         |
| `--vaadin-button-line-height`    |
| `--vaadin-button-margin`         |
| `--vaadin-button-padding`        |
| `--vaadin-button-text-color`     |

See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.

## Properties

### disabled

**Type:** `boolean`

When disabled, the button is rendered as "dimmed".

By default, disabled buttons are not focusable and don't react to hover.
As a result, they are hidden from assistive technologies, and it's not
possible to show a tooltip to explain why they are disabled. This can
be addressed by enabling the feature flag `accessibleDisabledButtons`,
which makes disabled buttons focusable and hoverable, while still
preventing them from being activated:

```js
// Set before any button is attached to the DOM.
window.Vaadin.featureFlags.accessibleDisabledButtons = true
```