Buttons

Primary Buttons

    
      <!-- Primary button -->
  <a href="#" class="btn lmp-primary">Button</a>
  
  <!-- Primary button - disabled -->
  <a href="#" class="btn lmp-primary disabled">Button</a>
  
  <!-- Primary button -->
  <button class="btn lmp-primary">Button</button>
  
  <!-- Primary button - disabled -->
  <button class="btn lmp-primary" disabled>Button</button>
  
  
    
  

Secondary Buttons

    
      <!-- Secondary button -->
  <a href="#" class="btn lmp-secondary">Button</a>
  
  <!-- Secondary button - disabled -->
  <a href="#" class="btn lmp-secondary disabled">Button</a>
  
  <!-- Secondary button -->
  <button class="btn lmp-secondary">Button</button>
  
  <!-- Secondary button - disabled -->
  <button class="btn lmp-secondary" disabled>Button</button>
  
  
    
  

Buttons with Icons

    
      <!-- Primary button with icon -->
  <a href="#" class="btn lmp-primary"><i class="lmp-icon" aria-hidden="true">email</i> Button</a>
  
  <!-- Secondary button with icon -->
  <a href="#" class="btn lmp-secondary"><i class="lmp-icon" aria-hidden="true">email</i> Button</a>
  
  <!-- Primary button with icon -->
  <button class="btn lmp-primary"><i class="lmp-icon" aria-hidden="true">email</i> Button</button>
  
  <!-- Secondary button with icon -->
  <button class="btn lmp-secondary"><i class="lmp-icon" aria-hidden="true">email</i> Button</button>
  
  
    
  

Button Links

    
      <!-- Button Link -->
  <a href="#" class="btn lmp-link">Button</a>
  
    
  

Outline Buttons

    
      <!-- Primary outline button -->
  <a href="#" class="btn lmp-outline-primary">Button</a>
  
  <!-- Primary outline button - disabled -->
  <a href="#" class="btn lmp-outline-primary disabled">Button</a>
  
  <!-- Secondary outline button -->
  <button class="btn lmp-outline-secondary">Button</button>
  
  <!-- Secondary outline button - disabled -->
  <button class="btn lmp-outline-secondary" disabled>Button</button>
  
  
    
  

Outline Buttons With Large Icons

These buttons with larger icons are used in the view controls.

    
      <!-- Secondary outline button -->
  <button class="btn btn-sm lmp-outline-secondary lmp-lg-icon"><i class="lmp-icon icon-lg" aria-hidden="true">list</i></button>
  
  <!-- Secondary outline button - disabled -->
  <button class="btn btn-sm lmp-outline-secondary lmp-lg-icon" disabled><i class="lmp-icon icon-lg" aria-hidden="true">list</i></button>
  
  <!-- Secondary outline button -->
  <button class="btn btn-sm lmp-outline-secondary lmp-lg-icon"><i class="lmp-icon icon-lg" aria-hidden="true">line_style</i></button>
  
  <!-- Secondary outline button - disabled -->
  <button class="btn btn-sm lmp-outline-secondary lmp-lg-icon" disabled><i class="lmp-icon icon-lg" aria-hidden="true">line_style</i></button>
  
  <!--  -->
  <button class="btn btn-sm lmp-outline-secondary lmp-lg-icon  lmp-date-sort active">Date<i class="lmp-icon icon-lg" aria-hidden="true">arrow_upward</i></button>
  
  <!-- Secondary outline button - disabled -->
  <button class="btn btn-sm lmp-outline-secondary lmp-lg-icon" disabled>Date<i class="lmp-icon icon-lg" aria-hidden="true">arrow_upward</i></button>