Skip to content

Button

Rule

Always specify the type attribute of a button element :

  • Default behavior prevention - Buttons in a form default to type="submit" if not specified. This can cause unexpected form submissions when a user clicks a button that was intended for other purposes.
  • Explicit intent - Using the appropriate type (button, submit, or reset) clearly communicates the button's intended function to other developers.
  • Browser consistency - Different browsers might interpret untyped buttons differently, leading to inconsistent behavior across platforms.
  • Accessibility - Screen readers and assistive technologies can provide more accurate information to users when button types are explicitly defined.
  • Maintenance - As your application evolves, having explicitly typed buttons makes it easier to understand and maintain your code.

Example

🚨 DON’T

<button>Save Form</button>
<button (click)="showHelp()">Help</button>
<button>Clear Form</button>

✅ DO

<button type="submit">Save Form</button>
<button type="button" (click)="showHelp()">Help</button>
<button type="reset">Clear Form</button>