intellij-sdk-code-samples/topics/ui/controls/built_in_button.md

Built-In Button

UI guidelines on using built-in buttons.

A built-in button is an icon placed inside an input control.

{width=250}

How to use

Place the built-in button inside the input control. Do not place the built-in button on the right of a control:

{width=250}

To place a button inside a text field, use ExtendableTextField and its addExtension() method.

The shortcut for a built-in button is Shift+Enter.

Types

Browse

A browse button opens a dialog with the disk, a tree view or a table of values. Use a control with the browse icon for a file/folder path selected from the disk.

{width=250}

An input field with browse button: TextFieldWithBrowseButton

A combo box with browse button:

val browseExtension = ExtendableTextComponent.Extension.create(
    AllIcons.General.OpenDisk,
    AllIcons.General.OpenDiskHover,
    "Open file",
    { System.out.println("Browse file clicked") }
)
val extComboBox = ComboBox<String>(STRING_VALUES)
extComboBox.setEditable(true)
extComboBox.setEditor(object : BasicComboBoxEditor() {
  override fun createEditorComponent(): JTextField {
    val ecbEditor = ExtendableTextField()
    ecbEditor.addExtension(browseExtension)
    ecbEditor.setBorder(null)
    return ecbEditor
  }
})

ExtendableTextComponent.Extension browseExtension =
  ExtendableTextComponent.Extension.create(
    AllIcons.General.OpenDisk,
    AllIcons.General.OpenDiskHover,
    "Open file",
    () -> System.out.println("Browse file clicked")
  );
ComboBox<String> extComboBox = new ComboBox<>(STRING_VALUES);
extComboBox.setEditable(true);
extComboBox.setEditor(new BasicComboBoxEditor() {
  @Override
  protected JTextField createEditorComponent() {
    ExtendableTextField ecbEditor = new ExtendableTextField();
    ecbEditor.addExtension(browseExtension);
    ecbEditor.setBorder(null);
    return ecbEditor;
  }
});

Do not place the button on the right of the control.

{width=250}

Expand field

If the input text can be long and place is constrained, use a built-in button to expand the control (ExtendableTextField):

{width=332}

{width=582}

Do not use the Show Viewer button instead.

{width=357}

List values

Use a control with the table icon to select from the list of classes, methods or environment variables:

{width=250}

Use a combo box instead of the Variables button. This icon works as a combo box.

{width=514}

Add value

The Plus button works the same way as the Browse button. The only difference is that the selected value is added, instead of overwriting the existing one. Place the plus icon inside the control. {width=250}

Copy, Info

{width="57"}	{width="57"}
Do not use the Copy button, the content can be selected and copied using the Cmd/Ctrl+C shortcut or the context menu.	Do not use the info button to open an external link. Use context help instead.
{style=none}