Buttons

FAB

Fab button variation, add the class bas-ui-button-fab.

   

<a class="bas-ui-button bas-ui-button-primary bas-ui-button-fab bas-ui-waves-light"><i class="mdi mdi-plus bas-ui-icon"></i></a>
<a class="bas-ui-button bas-ui-button-primary bas-ui-button-fab bas-ui-waves-light disabled"><i class="mdi mdi-plus bas-ui-icon"></i></a>

Size FAB

Size Fab button variation, add the class bas-ui-button-fab-xs or bas-ui-button-fab-sm.

       

<a class="bas-ui-button bas-ui-button-primary bas-ui-button-fab bas-ui-button-fab-xs bas-ui-waves-light"><i class="mdi mdi-plus bas-ui-icon"></i></a>
<a class="bas-ui-button bas-ui-button-primary bas-ui-button-fab bas-ui-button-fab-sm bas-ui-waves-light"><i class="mdi mdi-plus bas-ui-icon"></i></a>
<a class="bas-ui-button bas-ui-button-primary bas-ui-button-fab bas-ui-waves-light"><i class="mdi mdi-plus bas-ui-icon"></i></a>

Action FAB

Action Fab button variation. You can see in bottom right on this page

<div class="bas-ui-button-fab-action">
    <a class="bas-ui-button bas-ui-button-primary bas-ui-button-fab bas-ui-waves-light"><i class="mdi mdi-pencil bas-ui-icon"></i></a>
    <ul>
        <li><a class="bas-ui-button bas-ui-button-primary bas-ui-button-fab bas-ui-button-fab-sm bas-ui-waves-light blue-500"><i class="mdi mdi-chart-bar bas-ui-icon"></i></a></li>
        <li><a class="bas-ui-button bas-ui-button-primary bas-ui-button-fab bas-ui-button-fab-sm bas-ui-waves-light light-blue-500"><i class="mdi mdi-format-quote bas-ui-icon"></i></a></li>
        <li><a class="bas-ui-button bas-ui-button-primary bas-ui-button-fab bas-ui-button-fab-sm bas-ui-waves-light red-500"><i class="mdi mdi-upload bas-ui-icon"></i></a></li>
        <li><a class="bas-ui-button bas-ui-button-primary bas-ui-button-fab bas-ui-button-fab-sm bas-ui-waves-light orange-500"><i class="mdi mdi-paperclip bas-ui-icon"></i></a></li>
    </ul>
</div>

You can also toggle them programmatically:

$('.bas-ui-button-fab-action').bas_ui_button('toggleFAB');

You can also open them programmatically:

$('.bas-ui-button-fab-action').bas_ui_button('openFAB');

You can also close them programmatically:

$('.bas-ui-button-fab-action').bas_ui_button('closeFAB');

Flat

Flat button variation, add the class bas-ui-button-flat.

Button     Button     Disabled

<a class="bas-ui-button bas-ui-button-default bas-ui-button-flat bas-ui-waves">Button</a>
<a class="bas-ui-button bas-ui-button-default bas-ui-button-flat bas-ui-waves secondary-color-text">Button</a>
<a class="bas-ui-button bas-ui-button-default bas-ui-button-flat bas-ui-waves disabled">Disabled</a>

Raised

Raised button variation, add the class bas-ui-button-default.

Button     Disabled

<a class="bas-ui-button bas-ui-button-default bas-ui-waves">Button</a>
<a class="bas-ui-button bas-ui-button-default bas-ui-waves disabled">Disabled</a>

Colored

Colored button variations.

Button     Success     Info     Warning     Danger     Custom

<a class="bas-ui-button bas-ui-button-primary bas-ui-waves-light">Button</a>
<a class="bas-ui-button bas-ui-button-success bas-ui-waves-light">Success</a>
<a class="bas-ui-button bas-ui-button-info bas-ui-waves-light">Info</a>
<a class="bas-ui-button bas-ui-button-warning bas-ui-waves-light">Warning</a>
<a class="bas-ui-button bas-ui-button-danger bas-ui-waves-light">Danger</a>
<a class="bas-ui-button bas-ui-button-primary bas-ui-waves-light purple-700">Custom</a>

Size

Size button variation, add the class bas-ui-button-lg for large size.

Button     Large Button

<a class="bas-ui-button bas-ui-button-primary bas-ui-waves-light">Button</a>
<a class="bas-ui-button bas-ui-button-primary bas-ui-button-lg bas-ui-waves-light">Large Button</a>

Icon

Icon button variation, add the left or right icon.

Button     Button

<a class="bas-ui-button bas-ui-button-primary bas-ui-waves-light"><i class="mdi mdi-cloud bas-ui-icon bas-ui-icon-left bas-ui-icon-18"></i>Button</a>
<a class="bas-ui-button bas-ui-button-primary bas-ui-waves-light"><i class="mdi mdi-cloud bas-ui-icon bas-ui-icon-right bas-ui-icon-18"></i>Button</a>