src/content/docs/linter/rules/use-button-type.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';
<Tabs> <TabItem label="JSX and TSX" icon="seti:javascript"> ## Summary - Rule available since: `v1.0.0` - Diagnostic Category: [`lint/a11y/useButtonType`](/reference/diagnostics#diagnostic-category) - 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**](/reference/diagnostics#error). - Sources: - Same as [`react/button-has-type`](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/button-has-type.md){
"linter": {
"rules": {
"a11y": {
"useButtonType": "error"
}
}
}
}
Enforces the usage of the attribute type for the element button
<button>Do something</button>
<button type="incorrectType">Do something</button>
React.createElement('button');
<>
<button type="button">Do something</button>
<button type={buttonType}>Do something</button>
</>
{
"linter": {
"rules": {
"a11y": {
"useButtonType": "error"
}
}
}
}
Enforces the usage and validity of the attribute type for the element button
<button>Do something</button>
<button type="incorrectType">Do something</button>
<button type="button">Do something</button>