Skip to main content

react/useButtonType

This rules enforces a type attribute for button elements and checks if it’s value is “button”, “submit” or “reset”, based on the button spec.

ESLint Equivalent: button-has-type

Examples

Invalid

<button>child</button>

 file.tsx:1 lint/react/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide an explicit type prop on button elements.

    <button>child</button>
    ^^^^^^^^^^^^^^^^^^^^^^

  The default button type of "submit" causes page reloads and is not
    typical behavior in a React application.


<button type='foo'>child</button>

 file.tsx:1:8 lint/react/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide an explicit type prop on button elements.

    <button type='foo'>child</button>
            ^^^^^^^^^^

  The default button type of "submit" causes page reloads and is not
    typical behavior in a React application.


React.createElement('button', {type: 'foo'}, ['child'])

 file.tsx:1 lint/react/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide an explicit type prop on button elements.

    React.createElement('button', {type: 'foo'}, ['child'])
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  The default button type of "submit" causes page reloads and is not
    typical behavior in a React application.


createElement('button', {type: 'foo'}, ['child'])

 file.tsx:1 lint/react/useButtonType ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Provide an explicit type prop on button elements.

    createElement('button', {type: 'foo'}, ['child'])
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  The default button type of "submit" causes page reloads and is not
    typical behavior in a React application.

Valid

<div>child</div>
<div type="type">child</div>
<button type="button">child</button>
<button type="submit">child</button>
<button type="reset">child</button>
React.createElement('div', ['child'])
React.createElement('div', {type: 'type'}, ['child'])
React.createElement('button', {type: 'button'}, ['child'])
React.createElement('button', {type: 'submit'}, ['child'])
React.createElement('button', {type: 'reset'}, ['child'])
createElement('div', ['child'])
createElement('div', {type: 'type'}, ['child'])
createElement('button', {type: 'button'}, ['child'])
createElement('button', {type: 'submit'}, ['child'])
createElement('button', {type: 'reset'}, ['child'])