Hi,
i have following “issue”
User must be able to open several Views in separate Tabs. Threrefor i must use an Anchor, with an anchor i can use rightclick > open in new Tab. With a button thats not possible or is there a way to get this done with a button as well?
At the end it doensnt matter, but would love to have one way thought the system and not one time button and at another page i use an anchor.
If you can use anchors (or router links), I highly recommend doing so. Generally, buttons shouldn’t be used for navigation.
If you need a reason to use one or the other, you can follow the Accessibility guidelines.
When the action user is performing (click) takes you to a different view / url - it should be an Anchor.
If the action executes something within the same view (like opening a dialog) without url change - probably should be a button.
With buttons, you can’t open the target in a new tab*. So I would (and do) use anchors. BUT: you can style them to appear like a button.
You can make your own AnchorButton component that you can then reuse all over the app for consistency.
public class AnchorButton extends Anchor {
public AnchorButton(String href, String text) {
super(href, text);
// use that class name to apply button-styling of anchors via css
addClassName("button-anchor");
}
}
*yes you can actually by executing window.location javascript with target=_blank, but the user cannot decide like they can with anchors
Yeah i did this. but is there a technical reason why a button is not able to act like an anchor? Only want to understand the difference. For me a button triggers an action; could be a forwarding or some other stuff
Ah What Are the Code Differences between Links vs Buttons? | Accessible Web
Thats what Herberts means, it follows a specification
As i mentioned in an edit above, you absolutely can execute some window.location javascript and specify target=“_blank” (–> opening the url in a new tab) using Buttons, but the problem is that the user has no options. Either the button ALWAYS opens in the same tab, or always in a new one. With anchors, the user can decide to open in the same tab (normal click), or in a new tab (ctrl+click / mousewheel-click / rightclick → ‘open in new tab’).
If you really really wanted to make Buttons work like that, I guess you could add your own context menu on a rightclick-listener over your navigation buttons, where you display the option to open in new tab, which will then fire the javascript with the target = _blank option.
Personally though, I’d choose another hill for my battles, and just do anchors.
Ahhh that makes a lot of sense, thanks for clarifying!
Actually nowadays you can
ui.getPage().open(url, "_blank");
I.e. you do not need JavaScript call (naturally technically the API mentioned is implemented with such JavaScript).
But the concerns regarding Accessibility mentioned here are valid. On the other hand you could workaround them by using custom aria label so that something intuitive is announced
button.setAriaLabel("open invoice form in a new browser tab");
Probably having buttonized RouterLink and Anchor theme variants in Lumo theme would not be a bad idea either.
I really never thought about that accesability thing! I now walk thoug the world open eyed to see how other tools are having buttons or anchors. Mostly the anchor is styled as a button
I usually just wrap the Button in an Anchor. It’s a simple as that
I wouldn’t recommend doing that, as it’s not valid HTML.
You can always make an anchor look like a button, e.g. using Lumo’s utility classes (or just CSS in general).
That’s for sure true as it violates the HTML spec. But it works with all browsers I’ve used so far
If you are worried about a11y… I’ve done something similar in the past. Once you change the role=button to role=presentation and remove the tab index… it does not feel as bad anymore 