Home WebriQ App Bar
Tool Bar
Webriq logo

© WebriQ

Free & Open Source (MIT)
Notifications
View All

Buttons

FAB

Fab button variation, add the class eq-ui-btn-fab.

    


a.btn.btn-primary.eq-ui-btn-fab.eq-ui-waves-light
  i.mdi.mdi-plus.icon
a.btn.btn-primary.eq-ui-btn-fab.eq-ui-waves-light.disabled
  i.mdi.mdi-plus.icon



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

Mini FAB

Mini Fab button variation, add the class eq-ui-btn-fab eq-ui-btn-mini-fab.

    


a.btn.btn-primary.eq-ui-btn-fab.eq-ui-btn-mini-fab.eq-ui-waves-light
  i.mdi.mdi-plus.icon
a.btn.btn-primary.eq-ui-btn-fab.eq-ui-btn-mini-fab.eq-ui-waves-light.disabled
  i.mdi.mdi-plus.icon



<a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light"><i class="mdi mdi-plus icon"></i></a>
<a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light disabled"><i class="mdi mdi-plus icon"></i></a>

Action FAB

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


.eq-ui-btn-fab-action
  a.btn.btn-primary.eq-ui-btn-fab.eq-ui-waves-light
    i.mdi.mdi-pencil.icon
  ul
    li
      a.btn.btn-primary.eq-ui-btn-fab.eq-ui-btn-mini-fab.eq-ui-waves-light.eq-sea-blue-500
        i.mdi.mdi-chart-bar.icon
    li
      a.btn.btn-primary.eq-ui-btn-fab.eq-ui-btn-mini-fab.eq-ui-waves-light.eq-water-blue-500
        i.mdi.mdi-format-quote.icon
    li
      a.btn.btn-primary.eq-ui-btn-fab.eq-ui-btn-mini-fab.eq-ui-waves-light.eq-pastel-red-500
        i.mdi.mdi-upload.icon
    li
      a.btn.btn-primary.eq-ui-btn-fab.eq-ui-btn-mini-fab.eq-ui-waves-light.eq-desert-orange-500
        i.mdi.mdi-paperclip.icon




<div class="eq-ui-btn-fab-action">
    <a class="btn btn-primary eq-ui-btn-fab eq-ui-waves-light"><i class="mdi mdi-pencil icon"></i></a>
    <ul>
        <li><a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light eq-sea-blue-500"><i class="mdi mdi-chart-bar icon"></i></a></li>
        <li><a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light eq-water-blue-500"><i class="mdi mdi-format-quote icon"></i></a></li>
        <li><a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light eq-pastel-red-500"><i class="mdi mdi-upload icon"></i></a></li>
        <li><a class="btn btn-primary eq-ui-btn-fab eq-ui-btn-mini-fab eq-ui-waves-light eq-desert-orange-500"><i class="mdi mdi-paperclip icon"></i></a></li>
    </ul>
</div>

You can also toggle them programmatically:


$('.eq-ui-btn-fab-action').toggleFAB();

You can also open them programmatically:


$('.eq-ui-btn-fab-action').openFAB();

You can also close them programmatically:


$('.eq-ui-btn-fab-action').closeFAB();

Flat

Flat button variation, add the class eq-ui-btn-flat.

Button     Button     Disabled 



a.btn.btn-default.eq-ui-btn-flat.eq-ui-waves Button
a.btn.btn-default.eq-ui-btn-flat.eq-ui-waves.eq-ui-secondary-color-text Button
a.btn.btn-default.eq-ui-btn-flat.eq-ui-waves.disabled Disabled


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

Raised

Raised button variation, add the class btn-default.

Button     Disabled 


a.btn.btn-default.eq-ui-waves Button
a.btn.btn-default.eq-ui-waves.disabled Disabled


<a class="btn btn-default eq-ui-waves">Button</a>
<a class="btn btn-default eq-ui-waves disabled">Disabled</a>

Colored

Colored button variations.

Button     Success     Info     Warning     Danger     Custom 


a.btn.btn-primary.eq-ui-waves-light Button
a.btn.btn-success.eq-ui-waves-light Success
a.btn.btn-info.eq-ui-waves-light Info
a.btn.btn-warning.eq-ui-waves-light Warning
a.btn.btn-danger.eq-ui-waves-light Danger
a.btn.btn-primary.eq-ui-waves-light.eq-desert-orange-500 Custom


<a class="btn btn-primary eq-ui-waves-light">Button</a>
<a class="btn btn-success eq-ui-waves-light">Success</a>
<a class="btn btn-info eq-ui-waves-light">Info</a>
<a class="btn btn-warning eq-ui-waves-light">Warning</a>
<a class="btn btn-danger eq-ui-waves-light">Danger</a>
<a class="btn btn-primary eq-ui-waves-light eq-desert-orange-500">Custom</a>

Size

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

Button     Large Button 


a.btn.btn-primary.eq-ui-waves-light Button
a.btn.btn-primary.btn-lg.eq-ui-waves-light Large Button


<a class="btn btn-primary eq-ui-waves-light">Button</a>
<a class="btn btn-primary btn-lg eq-ui-waves-light">Large Button</a>

Icon

Icon button variation, add the left or right icon.

Button     Button 


a.btn.btn-primary.eq-ui-waves-light
  i.mdi.mdi-cloud.icon.icon-left.icon-18
  | Button
a.btn.btn-primary.eq-ui-waves-light
  i.mdi.mdi-cloud.icon.icon-right.icon-18
  | Button


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