no-missing-button-type

Rule category

Correctness.

What it does

Enforces explicit type attribute for <button> elements.

Why is this bad?

The type attribute of the button element needs to be specified. The default value is type="submit", which can easily lead to unexpected behavior, especially when used in a form.

Examples

Failing

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>Click me</JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>;
  //     - Missing 'type' attribute on button component.
}

Passing

import React from "react";
 
function function Example(): React.JSX.ElementExample() {
  return <JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button React.ButtonHTMLAttributes<HTMLButtonElement>.type?: "button" | "submit" | "reset" | undefinedtype="button">Click me</JSX.IntrinsicElements.button: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>button>;
}