Button

The Button component allows the user to perform actions.

const [counter, setCounter] = useState(0);

return (
  <Button onClick={() => setCounter(counter + 1)}>
    Clicked {counter} times
  </Button>
);

Styles

The following variants can be used to distinguish between actions of different importance in the UI:

<Button theme="primary">Primary</Button>
<Button theme="secondary">Secondary</Button>
<Button theme="tertiary">Tertiary</Button>

Buttons can be customized with different styles and properties. As an example, here’s a disabled button:

<Button disabled>Disabled</Button>

Important

You can find more information in the corresponding article on vaadin.com.