Built-In Button

UI guidelines on using built-in buttons.

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

{width=706}

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

When to use

Use a built-in button instead of adding a separate button on the right where possible to save space and declutter the interface:

Correct

Incorrect

Browse

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 an input field with the Expand button:

{width=706}

Expanded field:

{width=706}

List values

Use the List icon to select a value from the list of objects such as 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}

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