Buttons

Button types used in Moodle

How to use buttons

Button components are available as part of a Moodle form, as a single button functioning as a form submit or triggering a JavaScript action. Buttons used in Moodle are based on the Bootstrap buttons.

The most used buttons types in Moodle are:

Example

<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-secondary">Secondary Button</button>
<button type="button" class="btn btn-danger">Danger Button</button>
<button type="button" class="btn btn-outline-secondary">Outline Button</button>

Primary buttons

For the primary/most used action on the page use a primary button. For each for or UI component there should only be one primary button.

Secondary buttons

Secondary buttons are used for the the cancel options on a form or as a button that is always visible (blocks editing on)

Danger buttons.

Use a danger button when the primary action is a potentially dangerous action, like deleting a contact in the messaging interface.

Outline buttons

Outline buttons are used for buttons that controll part of the user interface, like filters on a table or the display type on the user dashboard. Outline buttons look more subtle than secondary buttons and do not distract the user from the main user interface too much.

Subtle buttons

<button type="button" class="btn btn-subtle-secondary">Subtle Secondary</button>
<button type="button" class="btn btn-subtle-success">Subtle Succcess</button>
<button type="button" class="btn btn-sm btn-subtle-success">Subtle Succcess Small</button>

The subtle class is designed to create buttons that offer a balance between the visual prominence of standard buttons and the minimalism of outline buttons. This class aims to provide a softer, more understated appearance compared to regular buttons while still maintaining more visual presence than outline buttons.

Icon buttons

<button type="button" class="btn btn-icon">
    <i class="icon fa fa-ellipsis-vertical fa-fw" title="Edit" role="img"></i>
</button>
<button type="button" class="btn btn-icon text-bg-danger">
    <i class="icon fa fa-trash-can fa-fw" title="Delete" role="img"></i>
</button>
<button type="button" class="btn btn-icon icon-size-4">
    <i class="icon fa fa-user fa-fw" title="User" role="img"></i>
</button>
<button type="button" class="btn btn-icon icon-size-5">
    <i class="icon fa fa-user fa-fw" title="User" role="img"></i>
</button>

The .btn-icon class styles buttons that contain only an icon, providing a visually appealing and compact design for icon-only buttons. This class is ideal for creating minimalistic, icon-based interactions within your UI.

The .btn-icon class standardizes icon button styles using the $btn-icon-border-radius variable in variables.scss. While this ensures consistency, the .rounded-circle Bootstrap class can still be used for legacy support, though it’s discouraged for new designs.

Adding buttons to a page

Using the single_select renderer

The single_button() renderer allows you to quickly add a button with an action to a page without having to write a template for the page. Single select buttons are added as miniature forms that can pass custom form data.

<?php 
    $url = new moodle_url("$CFG->wwwroot/my/index.php", $params);
    $button = $OUTPUT->single_button($url, $editstring);
    $PAGE->set_button($resetbutton . $button);
 ?>

Button links

Links can be style to look like buttons, the action for this button is to simply navigate to some other page

<a href="#next" class="btn btn-secondary">Next Page</a>

Action buttons

Action buttons have a data-action and are usually linked to a JavaScript eventlistener that will do something on button click.

<button data-action="show-fun-thing" class="btn btn-secondary">Click me</button>

UX tips

Primary buttons have a higher visual weight and attracts most attention it should be used for the default action on a page.

Use primary buttons for the positive action on the page, for example “Save” or “Submit” when working on an assignment

<div class="row">
    <div class="col-5">
        <div class="card mb-2">
            <div class="card-body">
                <strong>Save Changes?</strong>
                <div class="d-flex">
                    <button type="button" class="btn btn-secondary me-1">Cancel</button>
                    <button type="button" class="btn btn-primary me-1">Save</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-5">
        <div class="card mb-2">
            <div class="card-body">
                <strong>Delete profile</strong>
                <div class="d-flex">
                    <button type="button" class="btn btn-primary me-1">Cancel</button>
                    <button type="button" class="btn btn-secondary">Delete</button>
                </div>
            </div>
        </div>
    </div>
</div>

In case of more dangerous actions, like deleting something the having stiling the Cancel button as the primary button could be a good choice

Bootstrap classes are used to style Buttons, the most used styles are:

<button type="button" class="btn btn-primary">Primary buttons</button>
<button type="button" class="btn btn-secondary">Secondary buttons</button>

Button text

The meaning of buttons must be very clear.