Built-In Button

UI guidelines on using built-in buttons.

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

{width=706}

When to use

Browse

The Browse button shows a dialog for opening files from the disk, a tree view, or a table of values. Use the Browse icon to select a single file or a folder from the disc.

A combo box with the 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;
  }
});

Expand a field

If the input text can be long and the place is constrained, use the Expand button to expand the control (ExpandableTextField):

{width=706}

When the field is expanded, show the Collapse button:

{width=706}

List values

Use the List icon to select a value from the list of classes, methods, or environment variables:

{width=706}

Add value

Use the Add button to select multiple values, such as files, variables, folder paths. The selected values will be added to the existing list.

{width=706}

How to use

Place the built-in button inside the input field. Do not place the built-in button next to the field control:

Correct

Incorrect

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

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

When not to use

Cut, Copy, Paste

Do not use the Copy, Paste or Cut button. Instead, make sure these actions are available on pressing Cmd/Ctrl+X, Cmd/Ctrl+C, and Cmd/Ctrl+V shortcuts or from the context menu.

Correct