← Back to rules

react/button-has-type Restriction

What it does

Enforces an explicit type attribute for all HTML button elements.

Why is this bad?

The default value of type attribute for button HTML element is "submit" which is often not the desired behavior and may lead to unexpected page reloads.

Examples

Examples of incorrect code for this rule:

<button />
<button type="foo" />

Examples of correct code for this rule:

<button type="button" />
<button type="submit" />

Configuration

This rule accepts a configuration object with the following properties:

button

type: boolean

default: true

If true, allow type="button".

reset

type: boolean

default: true

If true, allow type="reset".

submit

type: boolean

default: true

If true, allow type="submit".

How to use

To enable this rule using the config file or in the CLI, you can use:

Config (.oxlintrc.json)

{
  "plugins": ["react"],
  "rules": {
    "react/button-has-type": "error"
  }
}

Config (oxlint.config.ts)

import { defineConfig } from "oxlint";

export default defineConfig({
  plugins: ["react"],
  rules: {
    "react/button-has-type": "error",
  },
});

CLI

oxlint --deny react/button-has-type --react-plugin

Version

This rule was added in v0.1.1.

References

• Rule Source
• Upstream rule docs
• Open rule in Oxc Playground