ButtonGroup

A compact set of mutually exclusive icon-only toggle buttons. Exactly one button is active at a time (radio behaviour). Ideal for toolbars, sort controls, and view-mode switchers. Each button shows a tooltip on hover. Fires m:buttongroup:change when the selection changes.

Sort Controls

Date and alphabetical sort — one active at a time.

Click a sort button…

View Mode

Switch between list, grouped, and grid layouts.

Click a view button…

Combined Toolbar

Multiple groups with a visual separator, wrapped in an .m-toolbar container.

Programmatic Control

Active value will appear here…

// Sort toolbar
echo $m->buttonGroup('sortGroup')
    ->buttons([
        ['value' => 'date-desc', 'icon' => 'fa-arrow-down-wide-short', 'tooltip' => 'Newest first', 'active' => true],
        ['value' => 'date-asc',  'icon' => 'fa-arrow-up-short-wide',   'tooltip' => 'Oldest first'],
        ['value' => 'az',        'icon' => 'fa-arrow-down-a-z',         'tooltip' => 'A → Z'],
        ['value' => 'za',        'icon' => 'fa-arrow-up-z-a',           'tooltip' => 'Z → A'],
    ]);

// View toolbar
echo $m->buttonGroup('viewGroup')
    ->buttons([
        ['value' => 'list',  'icon' => 'fa-list-ul',     'tooltip' => 'List view',  'active' => true],
        ['value' => 'group', 'icon' => 'fa-layer-group', 'tooltip' => 'Group by type'],
    ]);

// Combined toolbar with separator
echo '<div class="m-toolbar">';
echo $m->buttonGroup('sortGroup')->buttons([...]);
echo '<div class="m-button-group-sep"></div>';
echo $m->buttonGroup('viewGroup')->buttons([...]);
echo '</div>';

// Get current active value
var sort = m.buttonGroup('sortGroup');
console.log(sort.getActive()); // "date-desc"

// Set programmatically
sort.setActive('az');

// Listen for changes
document.getElementById('sortGroup')
    .addEventListener('m:buttongroup:change', function(e) {
        console.log('Sort changed to:', e.detail.value);
    });

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->buttonGroup($id)`		Create a ButtonGroup instance.
`->buttons($arr)`	`array`	Define the buttons. Each item: `{value, icon, tooltip?, active?}`.
`->addClass($class)`	`string`	Add extra CSS classes to the group element.
`->attr($name, $val)`	`string, string`	Set an arbitrary HTML attribute on the group element.

JS JS Methods

Method / Property	Parameters	Description
`m.buttonGroup(id)`	`string\|HTMLElement`	Get (or initialise) a ButtonGroup instance.
`.getActive()`		Return the currently active value, or `null` if none.
`.setActive(value)`	`string`	Programmatically activate a button by value; fires the change event if the value differs.

EVENT Events

Event Name	Detail	Description
`m:buttongroup:change`	`{ value: string }`	Fired on the group element whenever the active button changes.