Skip to main content

useButtonType (since v0.10.0)

Enforces the usage of the attribute type for the element button

Examples

Invalid

<button>Do something</button>
nursery/useButtonType.js:1:1 lint/nursery/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Provide an explicit type prop for the button element.
  
     nursery/useButtonType.js:1:1
    
  1  <button>Do something</button>
     ^^^^^^^^
  
   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>
nursery/useButtonType.js:1:14 lint/nursery/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Provide a valid type prop for the button element.
  
     nursery/useButtonType.js:1:14
    
  1  <button type="incorrectType">Do something</button>
                  ^^^^^^^^^^^^^^^
  
   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');
nursery/useButtonType.js:1:21 lint/nursery/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

   Provide an explicit type prop for the button element.
  
     nursery/useButtonType.js:1:21
    
  1  React.createElement('button');
                         ^^^^^^^^
  
   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>
</>