d8e83b57ea
* Add UI Guidelines to SDK docs * Add UI Guidelines to SDK docs * Fixing build errors * optimize PNGs * add UI guidelines landing page placeholder * IJ SDK Docs <-> UI guidelines crosslinks updated * split_button.md: remove reference to removed setting * use <ui-path> * use MD instead of <note> * use %gh-ic% links * drop_down.md: fix <control> * code samples: fix most obvious issues * remove obsolete `_defaults.md` * ijs.tree: UI cleanup * Delete "under construction" pages * Fix headers * Add link-summary * Remove invalid links * Delete unused files * Remove ''@2x' from image file names * Use Markdown syntax for some images and tables * Rename non-unique files to unique * Remove alpha in images where content is unreadable * align quotation marks * Controls: cleanup/fixes, add code links, edit * tooltip.md: fix HTML * misc fixes * typography.md: fix table contents * typography.md: fix table header * UI guidelines landing page + TOC fixes * remove unused icons_list.md * Normalize image paths * validation_errors.md: Fix broken tab * "correct"/"incorrect" labels styling * Resize images to 50% * button.topic: fixes * grammar, spelling, minor edits * remove ' ' * fix 99px * cleanup * UI_kit.md: minor * Fix "MRK058: Large image in paragraph rendered as a block element by default." * button.topic: Add img[alt] * mnemonics.md: Update "Contact Us" link to the IJSDK YouTrack * split_button.md: Use ui-path * UI landing: add feedback snippet * Improve code snippets formatting and naming * Fix code samples * Fix code samples * Add Kotlin variants for code samples * Add icons_list.md * crosslinks * Change external link to https://intellij-icons.jetbrains.design/ * icons list -> https://intellij-icons.jetbrains.design * Hide info about reducing split button to simple action button (now it is available through the registry only) * reformat * icons_style.md: Images in new line --------- Co-authored-by: marianna.kononenko <marianna.kononenko@jetbrains.com> Co-authored-by: Yann Cébron <yann.cebron@jetbrains.com>
2.5 KiB
Icon Button
UI guidelines on using icon buttons.
Implementation: ActionButton
A toolbar icon button is an icon that appears on a toolbar.
{width=156}
Types
There are three types of toolbar icon buttons:
An action button triggers an action immediately on clicking it, e.g., the Open button.
A toggle button switches the state on clicking it, e.g., a button to show and hide warnings in the output tree.
{width=143}
A drop-down button has an arrow icon in the bottom right corner and opens a menu with actions or checkboxes.
{width=284}
When to use
Follow the rules for toolbar.
How to use
Provide a recognizable icon. Use an existing icon or create a new one using icon guidelines.
Provide a short and descriptive name for a toolbar icon button. Show a tooltip with the button name on mouse hover. Include a shortcut if there is one. See Context help for details.
{width=163}
Highlight a toolbar icon button on mouse hover. Highlight a toolbar icon button with a brighter color on clicking it.
-
Toggle buttons remain highlighted when they are in the switched on mode. Toggled on buttons do not change color on hover.
-
Drop-down buttons remain highlighted while the menu is opened.
{width=183}
If an action is not available in this context, disable the corresponding button and gray out the icon. For toolbar drop-down buttons, disable the arrow icon as well. Do not highlight a disabled icon on mouse hover.
Sizes and placement
Icons size is 16x16px, icon selection is 22x22px.
For guidelines on the space between toolbar icon buttons see Toolbar.