Button vs. Anchor Guidance

grommet / hpe-design-system

HPE Design System

48 stars 24 forks source link

Button vs. Anchor Guidance #1364

Open vavalos5 opened 3 years ago

vavalos5 commented 3 years ago

During some discussions with the designer who is working on the Financial Services interfaces, a discussion on when to use anchor vs. button was brought up. We need some guidance that further and better explains when to use either. Perhaps what we have on the DS site is not enough. Currently in Figma we don't have any guidance.

vavalos5 commented 2 years ago

Just somethings I came across which could be helpful whenever we get to this Screen Shot 2021-12-14 at 1 40 29 PM https://ux.iu.edu/writings/buttons-vs-links-basic/

Screen Shot 2021-12-14 at 1 41 29 PM https://uxmovement.com/buttons/when-to-use-a-button-or-link/

bahriaditi commented 2 years ago

Assigning to @Keeth-HPe

Keeth, please include the following steps in your design process:

[x] Review existing documentation on Figma and the Design System site and identify what needs to be improved
[x] Reference UX best practices
[x] Create at least two visual examples to show context of use for anchors
[x] Review with Aditi
[x] Review with dev

You can use the WIP page in the Anchor Figma file to document your findings.

Thanks!

bahriaditi commented 2 years ago

Hi @Keeth-HPe I left some comments in the Figma file for you. Please update based on the feedback and let me know if you have any additional questions. Thank you!

bahriaditi commented 2 years ago

Thanks @Keeth-HPe I made a few updates. @taysea is reviewing this documentation too, so I'm leaving this in the review column for now.

bahriaditi commented 2 years ago

Figma link Taylor and I have reviewed Keeth's work and it looks good to us

@ericsoderberghp if you get a chance sometime today, could you do a quick review as well and see if anything jumps out to you? Thanks!

ericsoderberghp commented 2 years ago

I've dropped some comments in Figma.

ericsoderberghp commented 2 years ago

See additional comments from Derek and Samuel in this issue: https://github.com/grommet/hpe-design-system/issues/1847 I'm inclined to agree with Derek that Anchors should be used for the visual inline hyperlink and less prescriptive on what the action is.

taysea commented 2 years ago

In order for Anchor to work with onClick style actions, we would likely need to make some accessibility enhancements in Grommet. If Anchor doesn't have an href, then it does not receive tab focus and it is discourage to use href="#" as a workaround.

bahriaditi commented 2 years ago

Dependent on https://github.com/grommet/hpe-design-system/issues/1847