An app can show more than one button in a layout at a time, so a high-emphasis button can be accompanied by medium- and low-emphasis buttons that perform less important actions.
When using multiple buttons, ensure the available state of one button doesn’t look like the disabled state of another.
In a bottom bar, when using multiple buttons, indicate the more important action by placing it in a contained button (next to a text button).
Avoid using two contained buttons next to one another if they don’t have the same fill color.
Button preceded by an icon that represents the source type. The button label (“what is going to be selected?”) should be:
“Upload syllabus”
“Upload profile photo”
Upload a PDF / Image / Video file
Description:
Type specifiers
Size limitation
Any other in formation required for select the correct file
After file is selected, replace the icon by a preview of the file (ie: the image selected). In case isn’t possible to a preview, like in a pdf file, replace by an icon/image that represent the type of file
A button activates functionality (e.g., shows or hides content, toggles a state on or off).
A link navigates to new content.
Button Style
Check https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112
Button Hierarchy and Emphasis
From material-ui
Upload buttons
See live demo using react components https://codesandbox.io/s/upload-form-4vtjg?file=/demo.js
Button preceded by an icon that represents the source type. The button label (“what is going to be selected?”) should be:
Description:
After file is selected, replace the icon by a preview of the file (ie: the image selected). In case isn’t possible to a preview, like in a pdf file, replace by an icon/image that represent the type of file