Button

Buttons provide a clickable element in your UI. Buttons can be used in forms or anywhere that needs a simple click to function feature. They may display text, icons or both.

Properties

Buttons can be accompanied with various properties to change their appearance like -
- Primary: Simple primary theme colored button.
- Success: Success (green) themed button.
- Error: Error (red) themed button.
- Full width: Button which takes up full width of parent element.
- Link: Link like button.
- Disabled: Disabled, non-clickable button.
- Floating: Floating action button.

  
          
<!-- Primary Button -->
<button class="btn">Primary</button>
    
<!-- Button Link -->
<button class="btn btn-link">Link</button>
    
<!-- Button with Icon -->
<button class="btn icon-btn">
<i class="fa fa-camera icon"></i> Icon Button</button>
    
<!-- Disabled Button -->
<button class="btn btn-disabled">Disabled</button>

<!-- Success Button -->
<button class="btn btn-success">Button Success</button>

<!-- Error Button -->
<button class="btn btn-error">Button Error</button>
      
<!-- The FAB - Floating Action Button -->
<button class="btn btn-float btn-round">
<i class="fa fa-plus icon"></i></button>

<!-- Full Width Button -->
<button class="btn btn-full-width">Full width</button>

Pssshhhh... still looking for the Floating action button?
Find the + to your bottom right, the FAB moves with the viewport as you sroll your screen!