Button

  
    @import url("https://component-hub.netlify.app/button");
      
    <link rel="stylesheet" 
      href="https://component-hub.netlify.app/button">
  
  

Solid Buttons

The solid button component is available in three variants btn-primary , btn-secondary and btn-danger.

  
    <div class="btns">
      <button class="btns btn-primary">Primary</button>
      <button class="btns btn-second">Secondary</button>
      <button class="btns btn-danger">Danger</button>
    </div>
 
  

Outline Buttons

The button component is available in three variants btn-outline-primary, btn-outline-secondary and btn-outline-danger.

  
    <div class="btns">
      <button class="btns btn-outline-primary">Primary</button>
      <button class="btns btn-outline-second">Secondary</button>
      <button class="btns btn-outline-danger">Danger</button>
    </div>
 
  

Icon Buttons

Add the btn-icon class to the icon element with the link of the icon.

   
    <div class="btns">
      <button class="btns btn-primary">
      <ion-icon class="" name="cart-outline"></ion-icon> Primary
      </button>
      <button class="btns btn-danger"> 
      <ion-icon class="" name="trash-outline"></ion-icon> Danger
      </button>
    </div>