Last Update: Sept. 15, 2023
Platform: Web
Designer: Anton Fischer
Intro
In SuccessFactors we use a variant of a button that fulfils the role of a link in a toolbar. According to the Fiori Guideline usually links are not part of a toolbar. Button actions are expected to keep the user inside the page. In order to still implement the link functionality in the toolbar, we decided to go a SuccessFactor-specific direction.
Usage
The Button Link should only be used inside toolbars for cases where transportation to a different page happens, without the implication of a particular action. To distinguish the button between an action button and a button-like link, we are using the combination of icon and button to visually emphasize the specific behavior.
Types
There a three button variants are available to indicate action: only the combination of icon and button stands for the button link.
Structure & Components
Behavior & Interaction
With regards to the icon placement (before or after the label), it is preferable to have the icon before the label. Icon comes before label also when the button goes into the toolbar's overflow menu on a small screen.
Responsiveness & Adaptiveness
In the case of an overflow in the toolbar, the button flows into the overflow menu and behaves 100% responsively.
Application-specific examples
In order to provide the user with additional information in Growth Portfolio, the ButtonLink enables navigation to the Team Portfolio.
UX Writing Guidance
When creating a button label:
- Keep the button label short and crisp, it can´t exceed one line in length.
- Don´t use abbreviations.
- Don't use synonyms.
- Use active formulation.
- Exception: the OK button, where users are simply being asked to confirm they've read or seen something.
The following links point to:
- a chapters in the Frontify UX Guideline for additional information: About UX Writing
- the page: SAP SuccessFactors HXM Suite - Product Assistance: SAP SuccessFactors HXM Suite
For questions to the UA Team, please use the following DL:
Accessibility
The button link consists of two standard UI elements that behave according to the accessibility standard. Link to further A11Y information: https://www.figma.com/file/hvBFMT0PpUlahPAuKE2LhI/SF-Web-Stencils-V-1.1?type=design&node-id=3067-254692&mode=design&t=Cc0W92UHgTSHgHB0-4
Resources
Link to Fiori Design Guideline (button): https://experience.sap.com/internal/fiori-design-web/button/
Link to FIori Design Guideline (button variants) https://experience.sap.com/internal/fiori-design-web/button-web-component/#anatomy1
Link to the visual core wiki: https://wiki.one.int.sap/wiki/pages/viewpage.action?pageId=2698912599
SF Web Stencils Horizon Template