Button

Buttons allow users to take actions, and make choices, with a single tap

Button Sizes

Button comes with four sizes

          
            <button class="btn btn-xs btn-primary">Tiny</button>

            <button class="btn btn-sm btn-primary">Small</button>

            <button class="btn btn-md btn-primary">Medium</button>

            <button class="btn btn-lg btn-primary">Large</button>
          
        

Primary and Secondary buttons

          
            <button class="btn btn-lg btn-primary">Primary</button>
            
            <button class="btn btn-lg btn-secondary">Secondary</button>
          
        

Error States buttons

          
            <button class="btn btn-lg btn-success">Success</button>
            
            <button class="btn btn-lg btn-danger">Error</button>
            
            <button class="btn btn-lg btn-warning">Warning</button>
            
            <button class="btn btn-lg btn-info">Info</button>
          
        

Buttons with icon

          
            <button class="btn btn-lg btn-icon-trailing">
              <span>
                <svg width="1em" height="1em" viewBox="0 0 24 24">
                  <path
                    d="M20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"
                    fill="currentColor"
                  ></path>
                </svg>
              </span>
              Icon Button
            </button>
            
            <button class="btn btn-lg btn-icon-leading">
              Icon Button
              <span>
                <svg width="1em" height="1em" viewBox="0 0 24 24">
                  <path
                    d="M20 8l-8 5l-8-5V6l8 5l8-5m0-2H4c-1.11 0-2 .89-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"
                    fill="currentColor"
                  ></path>
                </svg>
              </span>
            </button>