Buttons

The Button component is used to trigger an action or event when clicked on it. The action can be opening a new page, closing the page, navigating across the app etc.

Solid buttons with different sizes

            
              <button class="btn-primary btn-xs">Button</button>
              <button class="btn-primary btn-sm">Button</button>
              <button class="btn-primary btn-md">Button</button>
              <button class="btn-primary btn-lg">Button</button>
              <button class="btn-primary btn-xl">Button</button>
            
          

Outline Buttons with different sizes

When we don't want to use heavy colors on our buttons, outline buttons comes handy and can be easily used as a secondary button.

            
              <button class="btn-outline btn-xs">Button</button>
              <button class="btn-outline btn-sm">Button</button>
              <button class="btn-outline btn-md">Button</button>
              <button class="btn-outline btn-lg">Button</button>
              <button class="btn-outline btn-xl">Button</button>
            
          

Link Button

Link buttons are very useful for navigating across the app or when we want to link to any third party site.

            
              <button class="link-btn link-sm">
                <a href="#">Link Button 1</a>
              </button>

              <button class="link-btn link-md">
                <a href="#">Link Button 2</a>
              </button>
            
          

Icon Button

Icon button contains the icon as a child to button element. It is used for better representation or to increase visual effects.

            
              <button class="btn btn-icon">
                <svg ...></svg>
                Add to Cart
              </button>

              <button class="btn btn-icon">
                <svg ...></svg>
                Email
              </button>
            
          

Floating Action Button

Floating action button plays an important role on small screens. We can easily add multiple actions to it which will appear on hover.

            
              <button class="floating-btn">+</button>