Feature Wiki
Information about planned and released features
Tabs
KS-Entry: Primary Button
Page Overview
[Hide]1 Guideline
- DOM, LESS, JS / Screenshot*:

- Less Variables:
- Color: btn-primary-color
- Background: btn-primary-background
- Border: btn-primary-border
- PHP Class: ilLinkButton (ilButton), ilSubmitButton (ilButton)
- PHP Example:
- External Library: Bootstrap Button
- Status of Entry: To be revised
- Status of Implementation: to be implemented
- Description*:
- Purpose: The Primary Button indicates the most important action on a screen. By definition there can only be one single “most important” action on any given screen and thus only one single Primary Button per screen.
- Composition: The background color is the btn-primary-color. This screen-unique Button-color ensures that it stands out and attracts the user’s attention while there are several buttons competing for attention.
- Effect: In Toolbars the Primary Button are required to be sticky, meaning they stay in view in the responsive view.
- Background:
- Tiddwell refers to the primary Button as “Prominent Done Button” and describes that “the button that finishes a transaction should be placed at the end of the visual flow; and is to be made big and well labeled.” She explains that “A well-understood, obvious last step gives your users a sense of closure. There’s no doubt that the transaction will be done when that button is clicked; don’t leave them hanging, wondering whether their work took effect”.
- The GNOME Human Interface Guidelines -> Buttons also describes a Button indicated as most important for dialogs.
- Context*:
- “Start test” in Module “Test”
- “Hand In” in exercise
- Rules:
- Usage:
- Most pages SHOULD NOT have any Primary Button at all.
- There MUST no more than one Primary Button per page in ILIAS.
- The decision to make a Button a Primary Button MUST be confirmed by the JF.
- Usage:
- Relations:
- Is A: Button
- Must Use: Text
- May Use:
- Todo in ILIAS 5.2:
- Less:
- Currently Primary Buttons are rendered using a custom less mixin which uses, lighten (brand-default, 15%) to color the background and border of the button. This is misleading, we have a variable btn-primary-bg/border for that.
- Currently white is used for the button color, this is misleading since there exists a less variable btn-primary-color for that.
- Less:
2 Status
- Effective from release: Release 5.2
- Approved by Jour Fixe at: JourFixe-2016-06-21
- Implementation status: partly implemented
- Funding for streamlining existing features: Universität Bern
- Implementation of guideline: { all developers | name of responsible developer }
3 Components that are not compliant with the Guideline
- …
4 Discussion
JourFixe, ILIAS [jourfixe], June 20, 2016: Highly appreciated and scheduled for 5.2.
Last edited: 21. Jun 2016, 12:36, Kunkel, Matthias [mkunkel]