New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Button vs Anchor For Actions That Need to Look Like Links #28192

Open
pixelshaded opened this Issue Feb 6, 2019 · 0 comments

Comments

Projects
None yet
2 participants
@pixelshaded
Copy link

pixelshaded commented Feb 6, 2019

I've been looking through the docs and issues and am having trouble determining what I should do. Closed issues seem to suggest that the bootstrap team advocates for using anchor tags when something actually navigates or takes you to another page, while buttons should be used for all other actions. This fits well with accessibility since screen readers do treat anchors and buttons differently. Anchors can be styled as buttons using the .btn class, and buttons can be styled to be like links with .btn-link, so it seems that everything is covered. However, elements with .btn class don't line up well when placed next to other text as mentioned here: #27515

I've created my own .btn-link-inline in our customized bootstrap based around the referenced issue. Here is a screenshot of the issue it is trying to solve:

btn-link-inline

My particular use case is a control that allows you to browse a tree. Nothing in this control links to another page. At the top are breadcrumbs allowing you to view parent folders in the tree (essentially go back). My inclination is to make these "links" buttons with .btn-link. Unfortunately, they don't align vertically at all with neighboring text, i.e. the divider. I can use a disabled button for the active folder but the divider is still an issue and making those disabled buttons as well makes no sense. I've tried adding p-0 border-0 and the like but they still don't line up well (an .align-inherit util is what is missing). What is the recommendation here?

  • implement custom styling for buttons that need to be rendered exactly like link text (this feels like it should be a bootstrap feature and I would be willing to create a PR)
  • go against accessibility standards and use anchor tags with void hrefs
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment