Buttons

The buttons come in several shapes, sizes and colors. Use the click events for attaching myClicks to it and see the examples below for the various renderings.

<button mbsc-button>Button</button>

<button mbsc-button data-start-icon="plus">Text & Icon</button>

<button mbsc-button data-end-icon="plus">Text & Icon</button>

<button mbsc-button data-icon="plus"></button>

<button mbsc-button data-variant="flat">Flat</button>

<button mbsc-button data-variant="flat" data-start-icon="arrow-left5">Flat & Icon</button>

<button mbsc-button data-variant="flat" data-icon="plus"></button>

<button mbsc-button data-variant="outline">Outline button</button>

<button mbsc-button data-variant="outline">Outline & Icon</button>

<button mbsc-button data-variant="outline" data-start-icon="arrow-plus">Outline Icon</button>

<button mbsc-button class="mbsc-button-block">Full width Button</button>

<div class="mbsc-button-group">
    <button mbsc-button>Button 1</button>
    <button mbsc-button>Button 2</button>
    <button mbsc-button>Button 3</button>
</div>

<!-- Buttons are streched to fill the full width of the container.-->
<div class="mbsc-button-group-justified">
    <button mbsc-button>Button 1</button>
    <button mbsc-button>Button 2</button>
    <button mbsc-button>Button 3</button>
</div>

<!-- Each button fills the whole width of the container. -->
<div class="mbsc-button-group-block">
    <button mbsc-button>Button 1</button>
    <button mbsc-button>Button 2</button>
    <button mbsc-button>Button 3</button>
</div>

<!-- Predefined button styles -->
<button mbsc-button data-color="primary">primary button</button>
<button mbsc-button data-color="secondary">secondary button</button>
<button mbsc-button data-color="success">success button</button>
<button mbsc-button data-color="danger">danger button</button>
<button mbsc-button data-color="warning">warning button</button>
<button mbsc-button data-color="info">info button</button>
<button mbsc-button data-color="light">light button</button>
<button mbsc-button data-color="dark">dark button</button>

<!-- Predefined flat button styles -->
<button mbsc-button data-variant="flat" data-color="primary">primary button</button>
<button mbsc-button data-variant="flat" data-color="secondary">secondary button</button>
<button mbsc-button data-variant="flat" data-color="success">success button</button>
<button mbsc-button data-variant="flat" data-color="danger">danger button</button>
<button mbsc-button data-variant="flat" data-color="warning">warning button</button>
<button mbsc-button data-variant="flat" data-color="info">info button</button>
<button mbsc-button data-variant="flat" data-color="light">light button</button>
<button mbsc-button data-variant="flat" data-color="dark">dark button</button>

<!-- Predefined outline button styles -->
<button mbsc-button data-variant="outline" data-color="primary">primary button</button>
<button mbsc-button data-variant="outline" data-color="secondary">secondary button</button>
<button mbsc-button data-variant="outline" data-color="success">success button</button>
<button mbsc-button data-variant="outline" data-color="danger">danger button</button>
<button mbsc-button data-variant="outline" data-color="warning">warning button</button>
<button mbsc-button data-variant="outline" data-color="info">info button</button>
<button mbsc-button data-variant="outline" data-color="light">light button</button>
<button mbsc-button data-variant="outline" data-color="dark">dark button</button>

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        var page = document.getElementById('page');
        page.innerHTML = xhr.responseText;
        mobiscroll.enhance(page);
    }
}
xhr.open('GET', '/myform', true);
xhr.send();

Options

For many more examples - simple and complex use-cases - check out the buttons demos for javascript.

Button Theming

Global variables of the Button

iOS theme

iOS Dark theme

Windwos theme

Windwos Dark theme

Material theme

Material Dark theme

If you are looking for the generic Form variables, check out the tables here.