extends ../_layout/_docs-layout.pug

block variables
  - var slug = 'buttons'
  - var parent = 'elements'
  - var title = 'Buttons - Elements - Spectre.css CSS Framework'
  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'

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.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