Refactor button components to use unified Button API#201
Merged
Conversation
Extends Button/IconButton to support JSX labels, refs, shape (square/circle), block (full-width), trailing icons, inline style, and uses native disabled attribute (replacing the click-bypassing btn-disabled class). Converts <button> tags across the app to Button/IconButton where they follow the daisyUI btn pattern: TopBar, Base, Modal, ProfileMenu, LanguageSelector, FrozenWorkspaceModal, DeleteWorkspaceModal, UsersAdmin, and the Login/Register submit buttons (preserving their custom register-btn-submit / login-back-btn styling). Custom-styled buttons that intentionally diverge from the daisyUI btn pattern (sidebar nav, role pickers, dropdown items, small icon actions, custom modal CTAs) remain as plain <button> tags.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR refactors button usage across the application to use the enhanced
ButtonandIconButtoncomponents from a unified component API, replacing raw HTML<button>elements and improving consistency.Key Changes
Enhanced Button Component API:
labelprop to acceptJSXElementinstead of just strings, enabling complex contenttrailingIconprop for icons after the labelshapeprop supporting 'square' and 'circle' valuesblockprop for full-width buttonsstyleprop for inline styles andrefprop for element referencesIconButtonto share base props withButtonfor consistencyLogin Page: Replaced native
<button>elements withButtoncomponent for login and 2FA submit buttons, and back button, using the newisLoadingandlabelpropsRegister Page: Replaced native
<button>withButtoncomponent for the register submit buttonTopBar Component: Converted all navigation buttons (login, register, mobile menu toggle) to use
ButtonandIconButtoncomponents with appropriate variants and propsAdmin Users Page: Replaced delete user button with
IconButtonand create user button withButtoncomponentProfile Menu: Refactored logout button to use
Buttoncomponent with loading stateLanguage Selector: Converted language selection buttons to use
ButtoncomponentModal Component: Replaced close button with
Buttoncomponent using the newshape="circle"propFrozenWorkspaceModal: Replaced action buttons with
ButtoncomponentsBase Page: Converted sidebar close button to
IconButtonDeleteWorkspaceModal: Replaced cancel button with
ButtoncomponentCSS Updates: Added
min-heightandpaddingadjustments to.register-btn-submitclass to ensure proper button sizing with the new component structureImplementation Details
Buttoncomponent now intelligently handles loading states by showing a spinner instead of the icon whenisLoadingis truedata-cyattributes were converted to the camelCasedataCyprop for consistencyShowcomponents for loading states in favor of the component's built-inisLoadingprop handlinghttps://claude.ai/code/session_01WTi6w5JG3VGv8a2EojToMh