Design System - Component(s): Buttons

[lrchang2]

Dependency

#135

Overview

We need to develop library for the button components so it can be passed off and used by the developers.

Action Items

• look at UI component for high-fi wireframes for button
• do research on types of buttons and uses
  • standalone buttons
  • carousel buttons
• document sites and interfaces researched in figma
• size
  • mobile
  • desktop
• state of button
  • focus
  • hover
  • press/active (mobile)
  • disable - if needed
  • secondary - if needed
• create component with
  • class
  • css
  • use
  • context

Resources/Instructions

figma
website competitor
Index of Project Files for Website Requirements (see Research category)

[Archana-M]

@lrchang2
Progress: I have completed the first two tasks on the board.
Blockers: I would like to discuss the color usage for the different states of the buttons.
Availability: 6 hours for this project
ETA: End of this week for final review.

[lrchang2]

realize there were 2 different button sizes applied to the prototype: bigger carousel button and smaller primary button.

did a comparison of the bigger vs smaller buttons applied to the prototype. team decided that even though aesthetically the bigger button seemed more proportional to images and headings and the bigger button calls attention to it, we need to do a competitive analysis of button types and sizes from competitive websites to make an educated decision.

[Archana-M]

Progress: Completed the comparative analysis Figma Link
Blockers: Discuss the comparative analysis with the team and come to a conclusion about the standard button size.
Availability: 6 hours
ETA: 02/07

[lrchang2]

@Archana-M
Please add update using this template (even if you have a pull request)

Progress: "What is the current status of your project? What have you completed and what is left to do?"
Blockers: "Difficulties or errors encountered."
Availability: "How much time will you have this week to work on this issue?"
ETA: "When do you expect this issue to be completed?"
Pictures: "Add any pictures of the visual changes made to the site so far."

If you need help, be sure to either:

1. ask for help at your next meeting
2. put a "Status: Help Wanted" label on your issue and pull request
3. put up a request for assistance on the #access-the-data channel.

[Archana-M]

Progress: Completed working on buttons figma
Would like to suggest that we go with smaller padding for buttons.

[lrchang2]

going with the smaller padding for the buttons

look at length of button copy (by character count) - does it need a specific call to action?

[Archana-M]

Progress: Working with Kaylena on Usability Testing
Blockers: No blockers
Availability: 6 hrs

[lrchang2]

button confirmed during usability testing, closing out issue