diff --git a/images/ui/link/link.png b/images/ui/link/link.png new file mode 100644 index 000000000..e8622bac3 Binary files /dev/null and b/images/ui/link/link.png differ diff --git a/images/ui/link/link_dark.png b/images/ui/link/link_dark.png new file mode 100644 index 000000000..872ebe22b Binary files /dev/null and b/images/ui/link/link_dark.png differ diff --git a/images/ui/link/link_dropdown.png b/images/ui/link/link_dropdown.png new file mode 100644 index 000000000..76b60b23a Binary files /dev/null and b/images/ui/link/link_dropdown.png differ diff --git a/images/ui/link/link_dropdown_dark.png b/images/ui/link/link_dropdown_dark.png new file mode 100644 index 000000000..7a18a36b1 Binary files /dev/null and b/images/ui/link/link_dropdown_dark.png differ diff --git a/images/ui/link/link_how_to_1_correct-1.png b/images/ui/link/link_how_to_1_correct-1.png new file mode 100644 index 000000000..a1ef24e95 Binary files /dev/null and b/images/ui/link/link_how_to_1_correct-1.png differ diff --git a/images/ui/link/link_how_to_1_correct.png b/images/ui/link/link_how_to_1_correct.png new file mode 100644 index 000000000..2fb928842 Binary files /dev/null and b/images/ui/link/link_how_to_1_correct.png differ diff --git a/images/ui/link/link_how_to_1_correct_dark.png b/images/ui/link/link_how_to_1_correct_dark.png new file mode 100644 index 000000000..a1ef24e95 Binary files /dev/null and b/images/ui/link/link_how_to_1_correct_dark.png differ diff --git a/images/ui/link/link_how_to_1_incorrect-1.png b/images/ui/link/link_how_to_1_incorrect-1.png new file mode 100644 index 000000000..f253584dd Binary files /dev/null and b/images/ui/link/link_how_to_1_incorrect-1.png differ diff --git a/images/ui/link/link_how_to_1_incorrect.png b/images/ui/link/link_how_to_1_incorrect.png new file mode 100644 index 000000000..e10b045c1 Binary files /dev/null and b/images/ui/link/link_how_to_1_incorrect.png differ diff --git a/images/ui/link/link_how_to_1_incorrect_dark.png b/images/ui/link/link_how_to_1_incorrect_dark.png new file mode 100644 index 000000000..f253584dd Binary files /dev/null and b/images/ui/link/link_how_to_1_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_2_correct.png b/images/ui/link/link_how_to_2_correct.png new file mode 100644 index 000000000..53ea10ca8 Binary files /dev/null and b/images/ui/link/link_how_to_2_correct.png differ diff --git a/images/ui/link/link_how_to_2_correct_dark.png b/images/ui/link/link_how_to_2_correct_dark.png new file mode 100644 index 000000000..0ed722c92 Binary files /dev/null and b/images/ui/link/link_how_to_2_correct_dark.png differ diff --git a/images/ui/link/link_how_to_2_incorrect.png b/images/ui/link/link_how_to_2_incorrect.png new file mode 100644 index 000000000..77e038c59 Binary files /dev/null and b/images/ui/link/link_how_to_2_incorrect.png differ diff --git a/images/ui/link/link_how_to_2_incorrect_dark.png b/images/ui/link/link_how_to_2_incorrect_dark.png new file mode 100644 index 000000000..944686b30 Binary files /dev/null and b/images/ui/link/link_how_to_2_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_3_correct.png b/images/ui/link/link_how_to_3_correct.png new file mode 100644 index 000000000..625034696 Binary files /dev/null and b/images/ui/link/link_how_to_3_correct.png differ diff --git a/images/ui/link/link_how_to_3_correct_dark.png b/images/ui/link/link_how_to_3_correct_dark.png new file mode 100644 index 000000000..02c8c4136 Binary files /dev/null and b/images/ui/link/link_how_to_3_correct_dark.png differ diff --git a/images/ui/link/link_how_to_3_incorrect.png b/images/ui/link/link_how_to_3_incorrect.png new file mode 100644 index 000000000..4c8135235 Binary files /dev/null and b/images/ui/link/link_how_to_3_incorrect.png differ diff --git a/images/ui/link/link_how_to_3_incorrect_dark.png b/images/ui/link/link_how_to_3_incorrect_dark.png new file mode 100644 index 000000000..7a484f120 Binary files /dev/null and b/images/ui/link/link_how_to_3_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_4_correct.png b/images/ui/link/link_how_to_4_correct.png new file mode 100644 index 000000000..ce0b1bdf1 Binary files /dev/null and b/images/ui/link/link_how_to_4_correct.png differ diff --git a/images/ui/link/link_how_to_4_correct_dark.png b/images/ui/link/link_how_to_4_correct_dark.png new file mode 100644 index 000000000..b8df3e3de Binary files /dev/null and b/images/ui/link/link_how_to_4_correct_dark.png differ diff --git a/images/ui/link/link_how_to_4_incorrect.png b/images/ui/link/link_how_to_4_incorrect.png new file mode 100644 index 000000000..2d21a77bf Binary files /dev/null and b/images/ui/link/link_how_to_4_incorrect.png differ diff --git a/images/ui/link/link_how_to_4_incorrect_dark.png b/images/ui/link/link_how_to_4_incorrect_dark.png new file mode 100644 index 000000000..1c73b6ad2 Binary files /dev/null and b/images/ui/link/link_how_to_4_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_5_correct.png b/images/ui/link/link_how_to_5_correct.png new file mode 100644 index 000000000..689c3902a Binary files /dev/null and b/images/ui/link/link_how_to_5_correct.png differ diff --git a/images/ui/link/link_how_to_5_correct_dark.png b/images/ui/link/link_how_to_5_correct_dark.png new file mode 100644 index 000000000..e7609225d Binary files /dev/null and b/images/ui/link/link_how_to_5_correct_dark.png differ diff --git a/images/ui/link/link_how_to_5_incorrect.png b/images/ui/link/link_how_to_5_incorrect.png new file mode 100644 index 000000000..442455e19 Binary files /dev/null and b/images/ui/link/link_how_to_5_incorrect.png differ diff --git a/images/ui/link/link_how_to_5_incorrect_dark.png b/images/ui/link/link_how_to_5_incorrect_dark.png new file mode 100644 index 000000000..67f6a99c4 Binary files /dev/null and b/images/ui/link/link_how_to_5_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_6-1.png b/images/ui/link/link_how_to_6-1.png new file mode 100644 index 000000000..5bc3c1eb2 Binary files /dev/null and b/images/ui/link/link_how_to_6-1.png differ diff --git a/images/ui/link/link_how_to_6.png b/images/ui/link/link_how_to_6.png new file mode 100644 index 000000000..e60b49185 Binary files /dev/null and b/images/ui/link/link_how_to_6.png differ diff --git a/images/ui/link/link_how_to_6_dark.png b/images/ui/link/link_how_to_6_dark.png new file mode 100644 index 000000000..5bc3c1eb2 Binary files /dev/null and b/images/ui/link/link_how_to_6_dark.png differ diff --git a/images/ui/link/link_how_to_7_correct.png b/images/ui/link/link_how_to_7_correct.png new file mode 100644 index 000000000..23dff211d Binary files /dev/null and b/images/ui/link/link_how_to_7_correct.png differ diff --git a/images/ui/link/link_how_to_7_correct_dark.png b/images/ui/link/link_how_to_7_correct_dark.png new file mode 100644 index 000000000..1ef1dfa2c Binary files /dev/null and b/images/ui/link/link_how_to_7_correct_dark.png differ diff --git a/images/ui/link/link_how_to_7_incorrect.png b/images/ui/link/link_how_to_7_incorrect.png new file mode 100644 index 000000000..22518bb5d Binary files /dev/null and b/images/ui/link/link_how_to_7_incorrect.png differ diff --git a/images/ui/link/link_how_to_7_incorrect_dark.png b/images/ui/link/link_how_to_7_incorrect_dark.png new file mode 100644 index 000000000..aa7b2b068 Binary files /dev/null and b/images/ui/link/link_how_to_7_incorrect_dark.png differ diff --git a/images/ui/link/link_how_to_8.png b/images/ui/link/link_how_to_8.png new file mode 100644 index 000000000..39afbf66a Binary files /dev/null and b/images/ui/link/link_how_to_8.png differ diff --git a/images/ui/link/link_how_to_8_dark.png b/images/ui/link/link_how_to_8_dark.png new file mode 100644 index 000000000..e198178b1 Binary files /dev/null and b/images/ui/link/link_how_to_8_dark.png differ diff --git a/images/ui/link/link_how_to_9.png b/images/ui/link/link_how_to_9.png new file mode 100644 index 000000000..8685d5c31 Binary files /dev/null and b/images/ui/link/link_how_to_9.png differ diff --git a/images/ui/link/link_how_to_9_correct.png b/images/ui/link/link_how_to_9_correct.png new file mode 100644 index 000000000..9ccf48423 Binary files /dev/null and b/images/ui/link/link_how_to_9_correct.png differ diff --git a/images/ui/link/link_how_to_9_correct_dark.png b/images/ui/link/link_how_to_9_correct_dark.png new file mode 100644 index 000000000..f7a19a1b8 Binary files /dev/null and b/images/ui/link/link_how_to_9_correct_dark.png differ diff --git a/images/ui/link/link_how_to_9_dark.png b/images/ui/link/link_how_to_9_dark.png new file mode 100644 index 000000000..a56bdcc41 Binary files /dev/null and b/images/ui/link/link_how_to_9_dark.png differ diff --git a/images/ui/link/link_how_to_9_incorrect.png b/images/ui/link/link_how_to_9_incorrect.png new file mode 100644 index 000000000..e2de93d9f Binary files /dev/null and b/images/ui/link/link_how_to_9_incorrect.png differ diff --git a/images/ui/link/link_how_to_9_incorrect_dark.png b/images/ui/link/link_how_to_9_incorrect_dark.png new file mode 100644 index 000000000..78bdd7125 Binary files /dev/null and b/images/ui/link/link_how_to_9_incorrect_dark.png differ diff --git a/images/ui/link/link_when_not_to_1_correct-1.png b/images/ui/link/link_when_not_to_1_correct-1.png new file mode 100644 index 000000000..7708b91a6 Binary files /dev/null and b/images/ui/link/link_when_not_to_1_correct-1.png differ diff --git a/images/ui/link/link_when_not_to_1_correct.png b/images/ui/link/link_when_not_to_1_correct.png new file mode 100644 index 000000000..4261f35b8 Binary files /dev/null and b/images/ui/link/link_when_not_to_1_correct.png differ diff --git a/images/ui/link/link_when_not_to_1_correct_dark.png b/images/ui/link/link_when_not_to_1_correct_dark.png new file mode 100644 index 000000000..7708b91a6 Binary files /dev/null and b/images/ui/link/link_when_not_to_1_correct_dark.png differ diff --git a/images/ui/link/link_when_not_to_1_incorrect-1.png b/images/ui/link/link_when_not_to_1_incorrect-1.png new file mode 100644 index 000000000..fb72e0ac9 Binary files /dev/null and b/images/ui/link/link_when_not_to_1_incorrect-1.png differ diff --git a/images/ui/link/link_when_not_to_1_incorrect.png b/images/ui/link/link_when_not_to_1_incorrect.png new file mode 100644 index 000000000..8bafc14dd Binary files /dev/null and b/images/ui/link/link_when_not_to_1_incorrect.png differ diff --git a/images/ui/link/link_when_not_to_1_incorrect_dark.png b/images/ui/link/link_when_not_to_1_incorrect_dark.png new file mode 100644 index 000000000..fb72e0ac9 Binary files /dev/null and b/images/ui/link/link_when_not_to_1_incorrect_dark.png differ diff --git a/images/ui/link/link_when_not_to_2_correct-1.png b/images/ui/link/link_when_not_to_2_correct-1.png new file mode 100644 index 000000000..1e2801a08 Binary files /dev/null and b/images/ui/link/link_when_not_to_2_correct-1.png differ diff --git a/images/ui/link/link_when_not_to_2_correct.png b/images/ui/link/link_when_not_to_2_correct.png new file mode 100644 index 000000000..9f12a06e5 Binary files /dev/null and b/images/ui/link/link_when_not_to_2_correct.png differ diff --git a/images/ui/link/link_when_not_to_2_correct_dark.png b/images/ui/link/link_when_not_to_2_correct_dark.png new file mode 100644 index 000000000..1e2801a08 Binary files /dev/null and b/images/ui/link/link_when_not_to_2_correct_dark.png differ diff --git a/images/ui/link/link_when_not_to_2_incorrect-1.png b/images/ui/link/link_when_not_to_2_incorrect-1.png new file mode 100644 index 000000000..5f74b9502 Binary files /dev/null and b/images/ui/link/link_when_not_to_2_incorrect-1.png differ diff --git a/images/ui/link/link_when_not_to_2_incorrect.png b/images/ui/link/link_when_not_to_2_incorrect.png new file mode 100644 index 000000000..e487bea75 Binary files /dev/null and b/images/ui/link/link_when_not_to_2_incorrect.png differ diff --git a/images/ui/link/link_when_not_to_2_incorrect_dark.png b/images/ui/link/link_when_not_to_2_incorrect_dark.png new file mode 100644 index 000000000..92c9590e9 Binary files /dev/null and b/images/ui/link/link_when_not_to_2_incorrect_dark.png differ diff --git a/images/ui/link/link_when_to_1.png b/images/ui/link/link_when_to_1.png new file mode 100644 index 000000000..2b3b9a144 Binary files /dev/null and b/images/ui/link/link_when_to_1.png differ diff --git a/images/ui/link/link_when_to_1_correct.png b/images/ui/link/link_when_to_1_correct.png new file mode 100644 index 000000000..53ea10ca8 Binary files /dev/null and b/images/ui/link/link_when_to_1_correct.png differ diff --git a/images/ui/link/link_when_to_1_correct_dark.png b/images/ui/link/link_when_to_1_correct_dark.png new file mode 100644 index 000000000..0ed722c92 Binary files /dev/null and b/images/ui/link/link_when_to_1_correct_dark.png differ diff --git a/images/ui/link/link_when_to_1_dark.png b/images/ui/link/link_when_to_1_dark.png new file mode 100644 index 000000000..f13ffa917 Binary files /dev/null and b/images/ui/link/link_when_to_1_dark.png differ diff --git a/images/ui/link/link_when_to_1_incorrect.png b/images/ui/link/link_when_to_1_incorrect.png new file mode 100644 index 000000000..707155ead Binary files /dev/null and b/images/ui/link/link_when_to_1_incorrect.png differ diff --git a/images/ui/link/link_when_to_1_incorrect_dark.png b/images/ui/link/link_when_to_1_incorrect_dark.png new file mode 100644 index 000000000..2a63f76d9 Binary files /dev/null and b/images/ui/link/link_when_to_1_incorrect_dark.png differ diff --git a/images/ui/link/link_when_to_2.png b/images/ui/link/link_when_to_2.png new file mode 100644 index 000000000..de42aba20 Binary files /dev/null and b/images/ui/link/link_when_to_2.png differ diff --git a/images/ui/link/link_when_to_2_dark.png b/images/ui/link/link_when_to_2_dark.png new file mode 100644 index 000000000..a8ad91d44 Binary files /dev/null and b/images/ui/link/link_when_to_2_dark.png differ diff --git a/images/ui/link/link_when_to_3.png b/images/ui/link/link_when_to_3.png new file mode 100644 index 000000000..47e04e7de Binary files /dev/null and b/images/ui/link/link_when_to_3.png differ diff --git a/images/ui/link/link_when_to_3_dark.png b/images/ui/link/link_when_to_3_dark.png new file mode 100644 index 000000000..2c435c584 Binary files /dev/null and b/images/ui/link/link_when_to_3_dark.png differ diff --git a/images/ui/link/link_when_to_4.png b/images/ui/link/link_when_to_4.png new file mode 100644 index 000000000..498b8d8d0 Binary files /dev/null and b/images/ui/link/link_when_to_4.png differ diff --git a/images/ui/link/link_when_to_4_dark.png b/images/ui/link/link_when_to_4_dark.png new file mode 100644 index 000000000..4ab0b085d Binary files /dev/null and b/images/ui/link/link_when_to_4_dark.png differ diff --git a/images/ui/link/link_when_to_5.png b/images/ui/link/link_when_to_5.png new file mode 100644 index 000000000..2f83548c3 Binary files /dev/null and b/images/ui/link/link_when_to_5.png differ diff --git a/images/ui/link/link_when_to_5_dark.png b/images/ui/link/link_when_to_5_dark.png new file mode 100644 index 000000000..ad30a3e59 Binary files /dev/null and b/images/ui/link/link_when_to_5_dark.png differ diff --git a/images/ui/link/link_when_to_6.png b/images/ui/link/link_when_to_6.png new file mode 100644 index 000000000..ba143f1f5 Binary files /dev/null and b/images/ui/link/link_when_to_6.png differ diff --git a/images/ui/link/link_when_to_6_dark.png b/images/ui/link/link_when_to_6_dark.png new file mode 100644 index 000000000..9a66e9a4b Binary files /dev/null and b/images/ui/link/link_when_to_6_dark.png differ diff --git a/topics/ui/Principles.md b/topics/ui/Principles.md index ae01c36c4..6aead928c 100644 --- a/topics/ui/Principles.md +++ b/topics/ui/Principles.md @@ -8,3 +8,4 @@ - [](platform_theme_colors.md) - [](typography.md) - [](validation_errors.md) +- [](Window-sizes.md) diff --git a/topics/ui/controls/link.md b/topics/ui/controls/link.md index 63639098d..714809e20 100644 --- a/topics/ui/controls/link.md +++ b/topics/ui/controls/link.md @@ -10,127 +10,262 @@ -![](01_link_example.png){width=120} +![A preview of link types: default, drop-down, and external.](link.png){width=706} ## When to use +### Navigation between pages of the same window + Use a regular link for navigation between pages of the same window. -![](02_deployment_server.png){width=494} + + + + + +
+ Correct + A vertical list of three options: 'Non-Project Files', 'Problems', and 'Production', followed by a 'Manage scopes…' link below. + + Incorrect + A vertical list of three options: 'Non-Project Files', 'Problems', and 'Production', followed 'Manage scopes' button below. +
-*This option is in the Settings dialog. "Configure servers" opens another page of the same dialog.* - -![](03_manage_scopes.png){width=411} - -*Do not use a button to navigate to another page of the same window.* +### Web resources Use an external link for navigation to web resources. See below for the [external link icon](#external-link-icon). -![](04_external_link.png){width=248} +![Text 'Learn more about what is logged' with 'what is logged' as an external link with arrow icon.](link_when_to_2.png){width=706} + +### Secondary actions in packed UI areas Use a regular or [drop-down link](#drop-down-link) for secondary actions in packed or small UI areas. -![](05_action_regular_link.png){width=367} +For example, the Reset action bellow is a link for two reasons: +* The action appears only when the default value in the field is changed, and reverting to a default is considered a rare scenario. +* A lightweight link fits better than a button in this busy layout. -*The "Reset" action is a link for two reasons: (1) The action appears only when the default value in the field is changed and reverting to a default is considered a rare scenario. (2) A lightweight link fits better than a button in this busy layout.* +![Form with three settings: 'Hard wrap at' with a Reset link, 'Wrap on typing', and 'Visual guide'.](link_when_to_3.png){width=706} -![](06_action_dropdown.png){width=550} +The Modify options drop-down link fits into the top right corner of a busy layout: -*The "Modify options" drop-down link fits into the top right corner of a busy layout.* +![Build and run section with 'Modify options' drop-down link. Contains a Java SDK selector, a command line arguments selector, and a program arguments input.](link_when_to_4.png){width=706} -Do not use links for primary actions or when a UI is not constrained. -Use a [button](button.topic) or a [drop down list](drop_down.md) instead. -These controls can be selected from the keyboard and are bigger and easier to click. - -![](07_android_sdk.png){width=451} - -## How to use - -### Writing guidelines - -Use sentence capitalization. - -Add an ellipsis to a button-link if it opens another UI area where input is possible. See examples for the [Button](button.topic). - -Do not use words like "navigate" or "click here". A link already implies navigation or clicking. - -![](08_writing_1.png){width=398} - -When possible, replace "Learn more" and other generic phrases with more informative ones. - -![](08_writing_2.png){width=316} - -### Link as a part of text - -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](empty_state.md) or in [context help](context_help.md). - -![](09_part_of_text_1.png){width=403} - -Make a link the minimum phrase that is enough to understand what will happen without reading the whole text. - -![](09_part_of_text_2.png){width=489} - -### Link in a tree or table +### Secondary actions in a tree or table Use a link as a secondary action for some items of a tree or table. -![](10_tree.png){width=387} +![A tree with a checkbox and four dependent controls, and links 'Set…' in the first and the fourth control](link_when_to_5.png){width=706} If an action is needed for all items of a tree or table: * Add an [icon button](icon_button.md) to a toolbar. * For a list of choices, add a separate table column of drop-down cells (see [Table](table.md#editing-values)). -* If a link in every tree or table line has meaningful formatting, leave it: - ![](11_table.png){width=342} - *Links in the "Push Commits" window have the format that helps understand the relation between them: "[remote repository] : [branch]". Moving these links elsewhere would break this meaning.* +* If 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: + ![Links in the Push Commits window 'origin : master'](link_when_to_6.png){width=706} + +## When not to use + +### Primary actions + +Use a [button](button.topic) or a [drop down list](drop_down.md) for primary actions. These controls can be selected from the keyboard and are bigger and easier to click. + + + + + + +
+ Correct + The Commit Message input with primary and secondary actions as buttons. + + Incorrect + The Commit Message input with primary and secondary actions as links. +
+ +### Simple UI + +Use a [button](button.topic) or a [drop down list](drop_down.md) when a UI is not constrained. +These controls can be selected from the keyboard and are bigger and easier to click. + + + + + + + + +
+ Correct + A stack of controls with a button 'Edit' following one of the controls. +
+ Incorrect + A stack of controls with a link 'Edit' following one of the controls. +
+ +## How to use + +### Writing guidelines + +#### Use sentence capitalization + +Follow the [sentence capilaziation](capitalization.md#sentence) guideline. + + + + + + +
+ Correct + A 'Modify options' drod-down with the sentence style capitalization. + + Incorrect + A 'Modify Options' drod-down with the title style capitalization. +
+ +#### Ellipsis + +Add an ellipsis to a button-link if it opens another UI area where input is possible. See examples for the [Button](button.topic). + + + + + + +
+ Correct + A vertical list of three options: 'Non-Project Files', 'Problems', and 'Production', followed by a 'Manage scopes…' link below. The link has an ellipsis in the end. + + Incorrect + Vertical list of three options: 'Non-Project Files', 'Problems', and 'Production', followed by a 'Manage scopes' link below. The link doesn't have an ellipsis in the end. +
+ +#### Wording + +Do not use words like "navigate" or "click here". A link already implies navigation or clicking. + + + + + + +
+ Correct + Link 'Proxy settings…'. + + Incorrect + Link 'Navigate to general proxy settings'. +
+ + + + + + +
+ Correct + Link 'Download drivers…'. + + Incorrect + Text reading 'Click here to download drivers' where 'here' is a link. +
+ +#### Make it informative + +When possible, replace "Learn more" and other generic phrases with more informative ones. + + + + + + +
+ Correct + Link 'How to use Closure Linter'. + + Incorrect + Link 'Learn more'. +
+ +### Link as a part of text + +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](empty_state.md) or in [context help](context_help.md): + +![Checkbox 'Use color scheme instead of the deafult' where 'deafult' is a link.](link_how_to_6.png){width=706} + +Make a link the minimum phrase that is enough to understand what will happen without reading the whole text: + + + + + + +
+ Correct + Text reading 'Learn more about what is logged' where 'what is logged' is a link. + + Incorrect + Link 'Learn more about what is logged'. +
### External link icon -Always add the arrow icon for an external link. The icon shows that the user will switch to a browser and lose the current context. +Add the arrow icon for an external link. The icon shows that the user will switch to a browser and lose the current context. + +![Text 'Learn more about what is logged' where 'what is logged' is an external link with the external link icon.](link_how_to_8.png){width=706} -![](04_external_link.png){width=248} - + -```kotlin -val externalLink = ActionLink("External link") { - BrowserUtil.browse("https://www.jetbrains.com") -}.apply { - setExternalLinkIcon() -} -``` + ```kotlin + val externalLink = ActionLink("External link") { + BrowserUtil.browse("https://www.jetbrains.com") + }.apply { + setExternalLinkIcon() + } + ``` + + - - - -```java -ActionLink externalLink = new ActionLink( - "External link", - event -> BrowserUtil.browse("https://www.jetbrains.com") -); -externalLink.setExternalLinkIcon(); -``` - - + ```java + ActionLink externalLink = new ActionLink( + "External link", + event -> BrowserUtil.browse("https://www.jetbrains.com") + ); + externalLink.setExternalLinkIcon(); + ``` + -An exception is a help topic link in [empty states](empty_state.md). -The help icon already hints that this is an external help resource, so the arrow icon is unnecessary. +### Help icon -![](12_external_link_no_icon.png){width=164} +Use the help icon in links in [empty states](empty_state.md) to indicate that this is an external help resource. The arrow icon in this case is unnecessary. + + + + + + +
+ Correct + Empty state in the Database tool window with an explanation text and a help source link 'Defining a database' with the help icon. + + Incorrect + Empty state in the Database tool window with an explanation text and an external link 'Defining a database' with the external link icon. +
### Drop-down link -Drop-down links show a context menu or a popup. -Use [`DropDownLink`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/DropDownLink.kt) to implement a drop-down link. +Drop-down links show a context menu or a popup. To implement, use [`DropDownLink`](%gh-ic%/platform/platform-api/src/com/intellij/ui/components/DropDownLink.kt). -![](13_drop_down_links.png){width=445} +![Control 'Changes from 2 commits' where '2 commits' is a drop-down link opening a list of all commits](link_dropdown.png){width=706} ## Placement -Lay out button-links as buttons and dropdown-links as combo boxes. See [Layout](layout.md). +* For button-links follow [layout of buttons and links](layout.md#buttons-and-links). +* For dropdown-links follow [layout of labeled controls](layout.md#labeled-input-controls). ## Built-in behavior A focused link is activated from the keyboard with Space. -