Buttons and Links

[ecureuill]

A button activates functionality (e.g., shows or hides content, toggles a state on or off).

A link navigates to new content.

• Don’t custom style links
• Use material-ui

Button Style

Check https://uxdesign.cc/ui-cheat-sheets-buttons-7329ed9d6112

Button Hierarchy and Emphasis

From material-ui

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.

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:

• “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

[github-actions[bot]]

Failure

• [ ] due to emulate links in Course Content's Link component
• [ ] due to inconsistency in Course Topic page's button
• [ ] due to emulated links of Link content in Course Topic page