<button>

The <button> element is a native interactive control that is keyboard-accessible and focusable by default, requiring no additional ARIA.

Use type="submit" for form submission, type="reset" to clear a form, without needing JavaScript.

Basic Button

<button>Button</button>

For .secondary, .contrast and .ghost styles, see Button Variants.

On how to turn non-button elements into buttons, see [role="button"].

Form Buttons

type="submit" and type="button" inputs are also displayed as buttons. All form buttons are width: 100%; by default, to match with the other form elements.

<input type="submit" value="Submit">
<input type="button" value="Input Button">

Reset inputs have the secondary style by default.

<input type="reset" value="Reset">

Practical Examples

Login Form

<form>
  <label for="email">Email</label>
  <input type="email" id="email" placeholder="you@example.com">
  <label for="password">Password</label>
  <input type="password" id="password" placeholder="Password">
  <button type="submit">Sign In</button>
</form>