Button

Buttons with variants, icons, loading states, confirmation dialogs, and ripple effects.

Variants

JavaScript Initialisation

Click a button to see output...

// Primary action with icon
<?= $m->button('saveBtn', 'Save Changes')
    ->primary()
    ->icon('fa-save')
    ->type('submit') ?>

// Danger action
<?= $m->button('deleteBtn', 'Delete')
    ->danger()
    ->icon('fa-trash')
    ->on('click', 'confirmDelete') ?>

// With confirmation dialog
<?= $m->button('resetBtn', 'Reset')
    ->confirm('Are you sure you want to reset?') ?>

// Full-width block button
<?= $m->button('loginBtn', 'Sign In')
    ->primary()
    ->block() ?>

// Initialise with click handler
m.button('btn-client', {
    events: {
        click: function() {
            console.log('Clicked!');
        }
    }
});

// Programmatic control
var btn = m.button('saveBtn');
btn.disable();
btn.enable();
btn.setText('Saving...');
btn.setLoading(true);

// Dynamic icon
btn.icon('fa-check', 'left');

PHP PHP Methods (Fluent)

Method / Property	Parameters	Description
`$m->button($id, $text)`	`string, string`	Create a button component.
`->primary()`		Apply primary (blue) styling.
`->secondary()`		Apply secondary styling.
`->danger()`		Apply danger (red) styling.
`->success()`		Apply success (green) styling.
`->block()`		Make the button full-width.
`->loading()`		Show a loading spinner.
`->icon($icon)`	`string`	Set a Font Awesome icon.
`->type($type)`	`string`	Set the button type: `button`, `submit`, `reset`.
`->name($name)`	`string`	Set the `name` attribute.
`->confirm($message)`	`string`	Show a browser confirm dialog before the click fires.
`->on($event, $handler)`	`string, string`	Attach a JS event handler.

JS JS Methods

Method / Property	Parameters	Description
`m.button(id, options)`	`string, ?object`	Initialise or get a button instance.
`enable()`		Remove the disabled state.
`disable()`		Add the disabled state.
`setText(text)`	`string`	Update button text (preserves icon).
`setLoading(loading)`	`boolean`	Toggle loading spinner and disable state.
`icon(faName, position)`	`string, string`	Set or replace the icon. Position: `"left"` or `"right"`.

EVENT Events

Event Name	Detail	Description
`click`		Standard DOM click event. Includes ripple animation.