useButtonType

JSX and TSX

Summary

• Rule available since: v1.0.0
• Diagnostic Category: lint/a11y/useButtonType
• This rule is recommended, which means 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

How to configure

biome.json

{
  "linter": {
    "rules": {
      "a11y": {
        "useButtonType": "error"
      }
    }
  }
}

Description

Enforces the usage of the attribute type for the element button

Examples

Invalid

<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
  

<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
  

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

<>
    <button type="button">Do something</button>
    <button type={buttonType}>Do something</button>
</>

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code
• Test Cases