section.buttons#buttons

  h2 Buttons
  p Use <code>button</code> class for default button appearance with optional <code>button-primary</code> and <code>button-secondary</code> classes for customized color variants. These classes can be applied to either <code>button</code> or <code>a</code> tags.

  button(class='button') Button
  a(href='#', class='button') Button (text link)
  button(class='button button-approve') Approval Button
  button(class='button button-warn') Warning Button
  button(class='button button-neutral') Neutral Button
  button(class='button button-outlined-neutral') Neutral Outlined Button
  button(class='button button-outlined-warn') Warning Outlined Button
  button(class='button button-outlined-approve') Approval Outlined Button
  button(class='button button-outlined') Outlined Button
  button(class='button button-caution') Caution Button
  button(class='button button-unstyled') Unstyled Button

  :markdown
    ```html
      <button class='button'>Button</button>
      <a href="#" class="button">Button (text link)</a>
      <button class='button button-approve'>Approval Button</button>
      <button class='button button-warn'>Warning Button</button>
      <button class='button button-neutral'>Neutral Button</button>
      <button class='button button-outlined-neutral'>Neutral Outlined Button</button>
      <button class='button button-outlined-warn'>Warning Outlined Button</button>
      <button class='button button-outlined-approval'>Approval Outlined Button</button>
      <button class='button button-outlined'>Outlined Button</button>
      <button class='button button-caution'>Caution Button</button>
      <button class='button button-unstyled'>Unstyled Button</button>
    ```

  h3 Button sizes
  p Buttons come in three different sizes&mdash;large, regular and small. Use <code>button-large</code>, no class and <code>button-small</code> classes respectively.

  button(class='button button-large') Large Button
  button(class='button') Regular Button
  button(class='button button-small') Small Button

  :markdown
    ```html
      <button class='button button-large'>Large Button</button>
      <button class='button'>Regular Button</button>
      <button class='button button-small'>Small Button</button>
    ```

  h3 Disabled buttons
  p For disabled (unclickable) apperance use <code>disabled</code> attribute for <code>button</code> elements and <code>button-disabled</code> class for links.

  button(class='button', disabled) Button
  button(class='button button-approve', disabled) Approval Button 
  a(href='#', class='button button-warn button-disabled') Warning Button (text link)
  button(class='button button-neutral', disabled) Neutral Button 
  button(class='button button-outlined', disabled) Outlined Button
  button(class='button button-outlined-neutral', disabled) Neutral Outlined Button
  button(class='button button-outlined-warn', disabled) Warning Outlined Button
  button(class='button button-outlined-approve', disabled) Approval Outlined Button

  :markdown
    ```html
      <button class='button' disabled>Button</button>
      <button class='button button-approve' disabled>Approval Button</button>
      <a href='#' class='button button-warn button-disabled'>Warning Button (text link)</a>
      <button class='button button-neutral' disabled>Neutral Button</button>
      <button class='button button-outlined' disabled>Outlined Button</button>
      <button class='button button-outlined-neutral' disabled>Neutral Outlined Button</button>
      <button class='button button-outlined-warn' disabled>Warning Outlined Button</button>
      <button class='button button-outlined-approve' disabled>Approval Outlined Button</button>
    ```

  h3 Button groups
  p To create a button group place any number of button elements in <code>button-group</code> container.

  .button-group
    button(class='button') Button
    button(class='button') Button
    button(class='button') Button

  .button-group
    button(class='button button-neutral') Button
    button(class='button button-neutral') Button
    button(class='button button-neutral') Button

  .button-group
    button(class='button button-outlined') Button
    button(class='button button-outlined') Button
    button(class='button button-outlined') Button
    
  :markdown
    ```html
      <div class="button-group">
        <button class="button">Button</button>
        <button class="button">Button</button>
        <button class="button">Button</button>
      </div>
      
      <div class="button-group">
        <button class="button button-neutral">Button</button>
        <button class="button button-neutral">Button</button>
        <button class="button button-neutral">Button</button>
      </div>
      
      <div class="button-group">
        <button class="button button-outlined">Button</button>
        <button class="button button-outlined">Button</button>
        <button class="button button-outlined">Button</button>
      </div>
    ```