Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Primary

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. If the loading animation is activated, the button shows a spinner wheel on-click and automatically switches to a deactivated state.

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 be 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.
The loading animation rules of the Standard Button MUST be respected.

Accessibility

Some Buttons can be stateful; when engaged, the state MUST be reflected in the "aria-pressed"-, respectively the "aria-checked"-attribute. If the Button is not stateful (which is the default), the aria-attribute SHOULD be omitted.

Example 1: Base

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Primary;
 
function base()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    return $renderer->render($f->button()->primary("Goto ILIAS", "http://www.ilias.de"));
}

Example 2: Engaged

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Primary;
 
function engaged()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $button = $f->button()->primary("Engaged Button", "#")
                                  ->withEngagedState(true);
    return $renderer->render($button);
}

Example 3: Unavailable action

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Primary;
 
/**
 * This example provides the given button with an unavailable action. Note
 * that the disabled attribute is set in the DOM. No action must be fired, even
 * if done by keyboard
 */
function unavailable_action()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    $button = $f->button()->primary('Unavailable', '#')->withUnavailableAction();
 
    return $renderer->render([$button]);
}

Example 4: With load anim

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Primary;
 
function with_load_anim()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
 
    return $renderer->render(
        $f->button()->primary("Goto ILIAS", "")
            ->withLoadingAnimationOnClick(true)
            ->withOnLoadCode(function ($id) {
                return
                    "$('#$id').click(function(e) {
							$('#$id').html('Working...');
							setInterval(
								function(){
									$('#$id').html('Done');
									il.UI.button.deactivateLoadingAnimation('$id');
								}
							,3000);
					});";
            })
    );
}

Example 5: With tooltip

<?php
 
declare(strict_types=1);
 
namespace ILIAS\UI\examples\Button\Primary;
 
function with_tooltip()
{
    global $DIC;
    $f = $DIC->ui()->factory();
    $renderer = $DIC->ui()->renderer();
    $primary =  $f->button()->primary("Goto ILIAS", "http://www.ilias.de")
        ->withHelpTopics(
            ...$f->helpTopics("ilias", "learning management system")
        );
    return $renderer->render($primary);
}

Relations

Parents

UIComponent
Button