p Buttons include simple button styles for actions in different types and sizes.

.docs-demo.columns
  .column.col-12
    button.btn default button
    button.btn.btn-primary primary button
    button.btn.btn-link link button

p
  | Add the #[code btn] class to #{'<a>'}, #{'<input>'} or #{''} elements for a default button. 
  | There are classes #[code btn-primary] and #[code btn-link] for predefined primary and link buttons.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      default button
      primary button
      link button

+docs-subheading('buttons-colors', 'Button colors')

.docs-demo.columns
  .column.col-12
    button.btn.btn-success success button
    button.btn.btn-error error button

p
  | Add the #[code btn-success] or #[code btn-error] class for success (green) or error (red) button color.
  | If you need more button colors, please use 
  a(href="getting-started.html#variables-buttons") button mixins
  |  to create your own button color variants.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      success button
      error button

+docs-subheading('buttons-sizes', 'Button sizes')

.docs-demo.columns
  .column.col-12
    button.btn.btn-primary.btn-lg
      | large 
      i.icon.icon-arrow-down
    button.btn.btn-primary.btn-lg large button
  .column.col-12
    button.btn.btn-primary
      | normal 
      i.icon.icon-arrow-down
    button.btn.btn-primary normal button
  .column.col-12
    button.btn.btn-primary.btn-sm
      | small 
      i.icon.icon-arrow-down
    button.btn.btn-primary.btn-sm small button

p
  | Add the #[code btn-sm] or #[code btn-lg] class for small or large button size. 
  | Also, you can add the #[code btn-block] class for a full-width button.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      large button
      small button

      <button class="btn btn-block">block button</button>

      <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
      <button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
      <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>

p
  | Please note that you could use the #[code btn-action] class for a square button, or add another #[code circle] class for a round button, which is often used as a Float Action Button (FAB).

.docs-demo.columns
  .column.col-xs-12
    button.btn.btn-action.btn-primary.btn-lg
      i.icon.icon-menu
    button.btn.btn-action.btn-primary
      i.icon.icon-menu
    button.btn.btn-action.btn-primary.btn-sm
      i.icon.icon-menu
  .column.col-xs-12
    button.btn.btn-action.btn-primary.btn-lg.circle
      i.icon.icon-arrow-up
    button.btn.btn-action.btn-primary.circle
      i.icon.icon-arrow-up
    button.btn.btn-action.btn-primary.btn-sm.circle
      i.icon.icon-arrow-up

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")

+docs-subheading('buttons-states', 'Button states')

p
  | Add the #[code active] class for active button state style.

.docs-demo.columns
  .column.col-12
    button.btn.active default active
    button.btn.btn-primary.active primary active
    button.btn.btn-link.active link active

p
  | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style.

.docs-demo.columns
  .column.col-12
    button.btn.disabled(tabindex="-1") default disabled
    button.btn.btn-primary(disabled="" tabindex="-1") primary disabled
    button.btn.btn-link(disabled="" tabindex="-1") link disabled

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      
      disabled button
      disabled button

p
  | A button with the #[code loading] class can show loading indicator.

.docs-demo.columns
  .column.col-12
    button.btn.loading default button
    button.btn.btn-primary.loading primary button
    button.btn.btn-link.loading link button

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      
      button
      primary button

+docs-subheading('buttons-groups', 'Button groups')

.docs-demo.columns
  .column.col-6.col-md-12
    .btn-group
      button.btn first button
      button.btn second button
      button.btn third button
  .column.col-6.col-md-12
    .btn-group.btn-group-block
      button.btn.btn-primary first button
      button.btn.btn-primary second button
      button.btn.btn-primary third button
  .column.col-6.col-md-12
    .btn-group
      button.btn.btn-sm.active first button
      button.btn.btn-sm second button
      button.btn.btn-sm third button
  .column.col-6.col-md-12
    .btn-group.btn-group-block
      button.btn.btn-primary.btn-sm.active first button
      button.btn.btn-primary.btn-sm second button
      button.btn.btn-primary.btn-sm third button
    
p
  | If you want to use buttons as a group, add the #[code btn-group] class to the container.
  | You can add the #[code btn-group-block] class for a full-width button group.

pre.code(data-lang='HTML')
  code
    :highlight(lang="html")
      
        first button
        second button
        third button
      
 