Examples

Kaiadmin Dashboard has changed the predefined button styles from Bootstrap, each serving its own semantic purpose, with a few extras thrown in for more control.

                    
                      <button class="btn btn-black">Default</button>
                      <button class="btn btn-primary">Primary</button>
                      <button class="btn btn-secondary">Secondary</button>
                      <button class="btn btn-info">Info</button>
                      <button class="btn btn-success">Success</button>
                      <button class="btn btn-warning">Warning</button>
                      <button class="btn btn-danger">Danger</button>
                      <button class="btn btn-light">Light</button>
                      <button class="btn btn-dark">Dark</button>
                      <button class="btn btn-link">Link</button>
                    
                  

Style buttons

                    
                      <button class="btn btn-primary">Default</button>
                      <button class="btn btn-primary btn-border">Border</button>
                      <button class="btn btn-primary btn-round">Round</button>
                      <button class="btn btn-primary btn-border btn-round">Border</button>
                      <button class="btn btn-primary"><span class="btn-label"><i class="flaticon-shapes"></i></span> With Icon</button>
                      <button class="btn btn-primary btn-link">Link</button>
                    
						      

Sizes

Fancy larger or smaller buttons? Add .btn-lg or .btn-sm for additional sizes.

                    
                      <button class="btn btn-primary btn-lg">Large</button>
                      <button class="btn btn-primary">Normal</button>
                      <button class="btn btn-primary btn-sm">Small</button>
                      <button class="btn btn-primary btn-xs">Extra Small</button>
                    
                  

Create block level buttons—those that span the full width of a parent—by adding .btn-block.

							
								<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
								<button type="button" class="btn btn-secondary btn-lg btn-block">Block level button</button>
							
						

Disabled state

Make buttons look inactive by adding the disabled boolean attribute to any <button> element.

							
								<button type="button" class="btn btn-lg btn-primary" disabled>Primary button</button>
								<button type="button" class="btn btn-secondary btn-lg" disabled>Button</button>
							
						

Disabled buttons using the <a> element behave a bit different:

• <a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.
• Some future-friendly styles are included to disable all pointer-events on anchor buttons. In browsers which support that property, you won’t see the disabled cursor at all.

							
								<a href="#" class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
								<a href="#" class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>