extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'buttons'
  - var parent = 'elements'
  - var title = 'Buttons - Elements - Spectre.css CSS Framework'
  - var description = 'Buttons include simple button styles for actions in different types and sizes. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'

block docs-content
  +docs-heading('buttons', 'Buttons')
    include ../_layout/_ad-g.pug

    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 #{'<button>'} 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")
          <button class="btn">default button</button>
          <button class="btn btn-primary">primary button</button>
          <button class="btn btn-link">link button</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/custom.html#variables-buttons") button mixins
      |  to create your own button color variants.

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <button class="btn btn-success">success button</button>
          <button class="btn btn-error">error button</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")
          <button class="btn btn-lg">large button</button>
          <button class="btn btn-sm">small button</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 s-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.s-circle
          i.icon.icon-arrow-up
        button.btn.btn-action.btn-primary.s-circle
          i.icon.icon-arrow-up
        button.btn.btn-action.btn-primary.btn-sm.s-circle
          i.icon.icon-arrow-up

    pre.code(data-lang='HTML')
      code
        :highlight(lang="html")
          <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
          <button class="btn btn-action s-circle"><i class="icon icon-arrow-left"></i></button>

    +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")
          <!-- buttons with disabled state -->
          <button class="btn disabled" tabindex="-1">disabled button</button>
          <button class="btn" disabled tabindex="-1">disabled button</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")
          <!-- buttons with loading state -->
          <button class="btn loading">button</button>
          <button class="btn btn-primary loading">primary button</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")
          <div class="btn-group btn-group-block">
            <button class="btn">first button</button>
            <button class="btn">second button</button>
            <button class="btn">third button</button>
          </div> 

    include ../_layout/_ad-c.pug

  include ../_layout/_footer.pug