-
Notifications
You must be signed in to change notification settings - Fork 0
Description
This new button component should be more robust, have more feedback, and have more features. Below are some ideas for props on this new button:
style: primary (solid theme-dependent accent color), secondary (outlined), frosted glass, transparent (dashboard tab button is an example)isLink: true or false, changes if the button component is a Link for proper Next.js navigation. This should not be true if a redirect occurs during the execution of onClick.disabled(optional): true or false (can be helpful for pages like availability painting, making sure the user puts a name and fills out availability before submitting)tooltip(optional): used to give the user contextonClick: the code to run when clickedtext: the text in the componenticon: the icon to be displayed next to the textshrinkForMobile: should the button shrink to just the icon on mobile displays?
This new button should have more feedback when hovering and clicking, so the user knows their action was acknowledged. A big pain point on the current site is that the site feels unresponsive when in reality it's just doing its thing.
All styles of button should be a consistent size, so taking the borders into account is important. (look at the header and you'll see why this is important)
The button should also display a "loading" icon while it's performing the task, whether that's calling some function or making an API call. It should not accept more clicks while processing, and it should not accept clicks after success if the button should only be clicked once (e.g. Login, Create Event).