useButtonType (JavaScript)

Summary

Rule available since: v1.0.0
Diagnostic Category: lint/a11y/useButtonType
This rule is recommended, meaning it is enabled by default.
This rule doesn’t have a fix.
The default severity of this rule is error.
Sources:
- Same as react/button-has-type
- Same as react-dom/no-missing-button-type
- Same as @eslint-react/dom-no-missing-button-type
- Inspired from @html-eslint/require-button-type

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "a11y": {
5
        "useButtonType": "error"
6
      }
7
    }
8
  }
9
}

Description

Enforces the usage of the attribute type for the element button

A button element without a type attribute behaves as type="submit". Inside a form, clicking it submits the form, which often reloads the page. That is rarely the intent of a button that opens a menu, toggles a panel, or runs a click handler.

This is easy to miss in component-based code, because a button rendered by one component can end up inside a form rendered by another. An explicit type makes the button behave the same wherever it’s rendered.

The HTML specification defines three values for type:

button: the button has no default behavior. Use it for buttons handled by JavaScript.
submit: the button submits its form.
reset: the button resets the controls of its form to their initial values.

Browsers treat any other value the same as a missing type, so the rule reports invalid values too.

The rule ignores type values that aren’t string literals, such as type={buttonType}, because their value can’t be known statically.

A JSX button with spread attributes, such as <button {...props}>, doesn’t need a type attribute, because the spread may provide it. If the element also has an explicit type attribute, the rule still checks its value.

Examples

Invalid

1
<button>Do something</button>

code-block.jsx:1:1 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide an explicit type prop for the button element.
  
  > 1 │ <button>Do something</button>
      │ ^^^^^^^^
    2 │ 
  
  ℹ The default type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
  
  ℹ Allowed button types are: submit, button or reset

1
<button type="incorrectType">Do something</button>

code-block.jsx:1:14 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a valid type prop for the button element.
  
  > 1 │ <button type="incorrectType">Do something</button>
      │              ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The default type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
  
  ℹ Allowed button types are: submit, button or reset

Clicking this button submits the form instead of clearing it:

1
<form onSubmit={search}>
2
    <input name="query" />
3
    <button>Clear</button>
4
</form>

code-block.jsx:3:5 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide an explicit type prop for the button element.
  
    1 │ <form onSubmit={search}>
    2 │     <input name="query" />
  > 3 │     <button>Clear</button>
      │     ^^^^^^^^
    4 │ </form>
    5 │ 
  
  ℹ The default type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
  
  ℹ Allowed button types are: submit, button or reset

1
<button {...props} type="incorrectType">Do something</button>

code-block.jsx:1:25 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide a valid type prop for the button element.
  
  > 1 │ <button {...props} type="incorrectType">Do something</button>
      │                         ^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ The default type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
  
  ℹ Allowed button types are: submit, button or reset

1
React.createElement('button');

code-block.js:1:21 lint/a11y/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Provide an explicit type prop for the button element.
  
  > 1 │ React.createElement('button');
      │                     ^^^^^^^^
    2 │ 
  
  ℹ The default type of a button is submit, which causes the submission of a form when placed inside a `form` element. This is likely not the behaviour that you want inside a React application.
  
  ℹ Allowed button types are: submit, button or reset

Valid

1
<>
2
    <button type="button">Do something</button>
3
    <button type={buttonType}>Do something</button>
4
    <button {...props}>Do something</button>
5
</>

1
<form onSubmit={search}>
2
    <input name="query" />
3
    <button type="reset">Clear</button>
4
    <button type="submit">Search</button>
5
</form>