# react/button-has-type

> Require an explicit, valid `type` on every `button` element

A `<button>` without a `type` is a submit button. Inside a `<form>`, clicking it submits the form and reloads the page, even if the button was only meant to open a menu.

The rule needs to read the value from the code, so it must be a string or a ternary between two strings. `React.createElement("button", ...)` is checked too.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

```toml bunfig.toml
[lint.rules]
"react/button-has-type" = "error" # or "warn"
```

Every option, set to its default:

```toml bunfig.toml
[lint.rules]
"react/button-has-type" = ["error", {
  button = true,
  submit = true,
  reset = true,
}]
```

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
<form>
  <button onClick={openMenu}>Options</button>
</form>;
```

{/* bad {"count": 2} */}
```jsx
const close = <button type="close">Close</button>;
const save = <button type={kind}>Save</button>;
```

{/* bad */}
```js
React.createElement("button", { onClick: openMenu }, "Options");
```

Not reported:

{/* good */}
```jsx
<form>
  <button type="button" onClick={openMenu}>Options</button>
  <button type={isLast ? "submit" : "button"}>Next</button>
</form>;
```

## Options

| Option | Default | What it does |
| --- | --- | --- |
| `button` | `true` | Allow `type="button"`. |
| `submit` | `true` | Allow `type="submit"`. |
| `reset` | `true` | Allow `type="reset"`. |

Set one to `false` to forbid that type:

{/* bad {"options": [{"reset": false}]} */}
```jsx
<button type="reset">Clear</button>;
```