Notification badges

Notification badges used in Moodle

How to use notification badges

Notification badges are used to display concise information or status indicators. They can be used to indicate the user an element has relevant information or new information.

Example

Usage

The core_renderer provides a notice_badge method to create a badge. The method accepts the following parameters:

• contents (string): The content to display inside the badge.
• badgestyle (core\output\local\properties\badge): The badge style to use. This is an enum that defines all possible badge styles. By default it will use primary style.
• title (string): An optional title attribute for the badge.

This is an example of how to render a notice badge using the core_renderer (the example uses dependency injection to get the renderer instance, see Dependency Injection for more information):

// Get the core renderer.
$renderer = \core\di::get(\core\output\renderer_helper::class)->get_core_renderer();

// Save the badge into a variable.
$badge = $renderer->notice_badge(
    contents: ($needgrading > 0) ? $needgrading : '',
    title: get_string('numberofsubmissionsneedgrading', 'assign'),
    badgestyle: \core\output\local\properties\badge::SECONDARY,
);

$content = new action_link(
    url: new url('/some/index.php'),
    text: get_string('gradeverb') . $badge,
);
echo $renderer->render($content);

Badge Styling

The badge can be styled using the \core\output\local\properties\badge enum. The enum provides the following badge styles:

• badge::PRIMARY: ‘primary’ (default style for badges)
• badge::SECONDARY: ‘secondary’ (usually in dark gray color)
• badge::SUCCESS: ‘success’ (usually in green color)
• badge::DANGER: ‘danger’ (usually in red color)
• badge::WARNING: ‘warning’ (usually in yellow color)
• badge::INFO: ‘info’ (usually in blue color)

This is how every badge style looks like:

Validate badges in behat

For behat and screen readers, the badge is read as a text in parentheses. For example, the badge with the text “1” is read as “1 (1)”. However, it is not recommended to test the badge text directly in combination with the parent element text because mustache templates may add some line breaks. Instead, you should test the badge text separately.

This is an example of how to test the example “Grade” badge in behat:

And I should see "Grade" in the "Assign with pending grades" "table_row"
And I should see "(2)" in the "Assign with pending grades" "table_row"