useButtonType
Summary
Section titled 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
- Same as
Description
Section titled DescriptionEnforces the usage of the attribute type for the element button
Examples
Section titled ExamplesInvalid
Section titled 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
Section titled Valid<> <button type="button">Do something</button> <button type={buttonType}>Do something</button></>How to configure
Section titled How to configure{ "linter": { "rules": { "a11y": { "useButtonType": "error" } } }}