Button
Button triggers an action, facilitates navigation, or both.,
External resources
Fully implemented in LOGEX Framework
Variants
There are many variants of a button in LDS. These variants can be grouped by hierarchy (primary, secondary, tertiary, link), by type (icon and text, text only, icon only), by size (normal, condensed), and by place of use (content, menu, panels, and dialogs).
Hierarchy
There are four hierarchical variants of a button. The primary button is the most prominent and it is reserved for the most important action. Secondary buttons are more subtle, they don’t distract from other elements. Tertiary and link buttons are used for supplementary and not very important actions.
- Primary button
- Secondary button
- Tertiary button
- Link button
Type
There are three types of buttons. Buttons with text are most common, sometimes accompanied by an icon for faster recognition. Icon buttons are used sporadically, for actions that are very common and recognizable by the icon itself. Link buttons and tertiary buttons have only textual variants.
- Icon and text
- Text only
- Icon only
Size
The buttons come in two sizes. There is a possibility of using the condensed button when the space is sparse, for example in other components.
- Normal size
- Condensed size
Place of use
Depending on a place and its background, there are some additional variants. For example, buttons in the menu and panel headers have different colors and are available in condensed size only. For more information about them, see pages Menu and Panel headers.
- Content
(white background) - Panel headers
(light blue background) - Menu
(dark blue background)
Usage
Placement
When placing more buttons in a row, the primary button is on the utmost left side, followed by secondary, tertiary, and link buttons. Limit the number of buttons to the most important actions only and hide the rest behind the “more action” button.
Place the primary action on the left-most side.
Do not use more than one primary button.
Texts
Keep the labels short, use action verbs, and avoid using confusing or generic labels. Vague labels such as “yes, OK, cancel” tell the user very little. The user must exactly know what happens after the button is pressed.
Use the action verbs.
It must be absolutely clear what happens after the button is clicked.
Avoid using vague labels.
Avoid using confusing labels.
Icons
When possible, use icons together with labels. Icons alone are very hard for users to decipher. All buttons with icons only should have an explanatory tooltip on hover.
