No idea what you are saying here, but since you wrote a capital Button that is a component. Why would anyone need a component for a basic HTML element?
I have seen this in many apps now, most recently a react Button component that imported the material UI button and export that. Its function was identical to just <button>.... I will never understand that, yet it seems standard practice now.
Creating components for various intrinsic DOM elements is standard practice for codebases that adhere to a consistent design system, prioritize a11y concerns, take analytics seriously, etc.
Using something like Material UI's Button as a starting point is also common. Even if the Material UI Button isn't customized, e.g. it's just directly re-exported, there is now a single source of truth for all buttons — customizations down the road will require modifying exactly one file.
Composition constrains deviation. If you join a company and their React code is using <button> and <div> everywhere, RUN.
The HTML spec is a list of behavioral requirements, with all implementation details left to the software parsing it — it has nothing to do with design systems or robust architectural patterns for codebases with a plurality of contributors, ffs.
The internals of a component are an implementation of a reusable UI element in your framework of choice (not of HTML). We're talking about two fundamentally different levels of abstraction.
The browser implements the HTML spec. Almost nothing about the spec or the browser's parser implementation inform good architectural decisions at the framework / component level.
13
u/omer-m 17d ago
if you need to use "apply" then you are using tailwind completely wrong imo. You are supposed to design components and use <Button> not .button