Use a regular link for navigation between pages of the same window. In the example bellow Manage scopes⦠opens another page in Settings for editing the values.
Web resourcesUse an external link for navigation to web resources. See below for the external link icon.
Secondary actions in packed UI areasUse a regular or drop-down link for secondary actions in packed or small UI areas.
Secondary actions in a tree or table Some items can be changedUse a link as a secondary action for some items of a tree or table.
All items can be changedIf a link in every tree or table line has meaningful formatting, leave it.
For example, links in the Push Commits window help understand the relation between them: [remote repository] : [branch]; moving these links elsewhere would break this meaning.
When not to use Primary actionsUse a button or a drop down list for primary actions. These controls can be selected from the keyboard and are bigger and easier to click.
Secondary actions in a tree or table Editable itemsWhen all items can be changed, add an icon button to a toolbar.
List of choicesFor a list of choices, add a separate table column of drop-down cells (see Table).
Simple UIUse a button or a drop down list when a UI is not constrained. These controls can be selected from the keyboard and are bigger and easier to click.
How to use Writing guidelines Use sentence capitalizationFollow the sentence capilaziation guideline.
EllipsisAdd an ellipsis to a link if it opens another UI area where input is possible. See examples for the Button.
WordingDo not use words like navigate or click here. A link already implies navigation or clicking.
When possible, replace Learn more and other generic phrases with more informative ones.
A link can be a part of a checkbox or radio button label or of any stand-alone text, like the text in an empty state or in context help:
Make a link the minimum phrase that is enough to understand what will happen without reading the whole text:
External link iconAdd the arrow icon for an external link. The icon shows that the user will switch to a browser and lose the current context.
Implementationval externalLink = ActionLink("External link") { BrowserUtil.browse("https://www.jetbrains.com") }.apply { setExternalLinkIcon() }
ActionLink externalLink = new ActionLink( "External link", event -> BrowserUtil.browse("https://www.jetbrains.com") ); externalLink.setExternalLinkIcon();
Help iconUse the help icon in links in empty states to indicate that this is an external help resource. The arrow icon in this case is unnecessary.
Drop-down linkDrop-down links show a context menu or a popup. To implement, use DropDownLink.
For default links follow layout of buttons and links.
For drop-down links follow layout of labeled controls.
A focused link is activated from the keyboard with Space.
10 April 2025
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4