{% import 'components/hljs.html' as hljs %}

<div class="{{ containerClass }} page__container">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="index.html">Home</a></li>
    <li class="breadcrumb-item">Components</li>
    <li class="breadcrumb-item active">Buttons</li>
  </ol>

  <h1 class="h2">Buttons</h1>

  <div class="row">
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Default</h4>
          <p class="card-subtitle">Default Button</p>
        </div>
        <div class="card-body">
          <p>Use the button classes on an <code>{{ "<a>" | escape }}</code>, <code>{{ "<button>" | escape }}</code>, or <code>{{ "<input>" | escape }}</code> element.</p>

          <div class="button-list">
            <button type="button" class="btn btn-white">White</button>
            <button type="button" class="btn btn-primary">Primary</button>
            <button type="button" class="btn btn-secondary">Secondary</button>
            <button type="button" class="btn btn-success">Success</button>
            <button type="button" class="btn btn-danger">Danger</button>
            <button type="button" class="btn btn-warning">Warning</button>
            <button type="button" class="btn btn-info">Info</button>
            <button type="button" class="btn btn-light">Light</button>
            <button type="button" class="btn btn-dark">Dark</button>
            <button type="button" class="btn btn-link">Link</button>
          </div>
        </div>
        <div class="card-footer bg-dark">
          {% call hljs.component() -%}
            <button type="button" class="btn btn-primary">Primary</button>
          {%- endcall %}
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Outline</h4>
          <p class="card-subtitle">Outline Button</p>
        </div>
        <div class="card-body">
          <p>Use the <code>.btn-outline-*</code> classes to quickly create bordered buttons.</p>
          <div class="button-list">
            <button type="button" class="btn btn-outline-primary">Primary</button>
            <button type="button" class="btn btn-outline-secondary">Secondary</button>
            <button type="button" class="btn btn-outline-success">Success</button>
            <button type="button" class="btn btn-outline-danger">Danger</button>
            <button type="button" class="btn btn-outline-warning">Warning</button>
            <button type="button" class="btn btn-outline-info">Info</button>
            <button type="button" class="btn btn-outline-light">Light</button>
            <button type="button" class="btn btn-outline-dark">Dark</button>
          </div>
        </div>
        <div class="card-footer bg-dark">
          {% call hljs.component() -%}
            <button type="button" class="btn btn-outline-primary">Primary</button>
          {%- endcall %}
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Rounded</h4>
          <p class="card-subtitle">Rounded Button</p>
        </div>
        <div class="card-body">
          <p>Add <code>.btn-rounded</code> to buttons to get large rounded corners.</p>
          <div class="button-list">
            <button type="button" class="btn btn-white btn-rounded">White</button>
            <button type="button" class="btn btn-primary btn-rounded">Primary</button>
            <button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
            <button type="button" class="btn btn-success btn-rounded">Success</button>
            <button type="button" class="btn btn-danger btn-rounded">Danger</button>
            <button type="button" class="btn btn-warning btn-rounded">Warning</button>
            <button type="button" class="btn btn-info btn-rounded">Info</button>
            <button type="button" class="btn btn-light btn-rounded">Light</button>
            <button type="button" class="btn btn-dark btn-rounded">Dark</button>
            <button type="button" class="btn btn-link btn-rounded">Link</button>
          </div>
        </div>
        <div class="card-footer bg-dark">
          {% call hljs.component() -%}
            <button type="button" class="btn btn-white btn-rounded">White</button>
          {%- endcall %}
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Rounded Outline</h4>
          <p class="card-subtitle">Rounded Outline Button</p>
        </div>
        <div class="card-body">
          <p>Use the <code>.btn-outline-*</code> and <code>.btn-rounded</code> classes together to quickly create bordered buttons with large rounded corners.</p>
          <div class="button-list">
            <button type="button" class="btn btn-outline-primary btn-rounded">Primary</button>
            <button type="button" class="btn btn-outline-secondary btn-rounded">Secondary</button>
            <button type="button" class="btn btn-outline-success btn-rounded">Success</button>
            <button type="button" class="btn btn-outline-danger btn-rounded">Danger</button>
            <button type="button" class="btn btn-outline-warning btn-rounded">Warning</button>
            <button type="button" class="btn btn-outline-info btn-rounded">Info</button>
            <button type="button" class="btn btn-outline-light btn-rounded">Light</button>
            <button type="button" class="btn btn-outline-dark btn-rounded">Dark</button>
          </div>
        </div>
        <div class="card-footer bg-dark">
          {% call hljs.component() -%}
            <button type="button" class="btn btn-outline-primary btn-rounded">Primary</button>
          {%- endcall %}
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Icon</h4>
          <div class="card-subtitle">Icon Button</div>
        </div>
        <div class="card-body">
          <p>Add icons to any button or even use Icon-only buttons.</p>
          <div class="button-list">
            <button type="button" class="btn btn-light">
              <i class="material-icons">favorite_border</i>
            </button>
            <button type="button" class="btn btn-danger">
              <i class="material-icons">close</i>
            </button>
            <button type="button" class="btn btn-dark">
              <i class="material-icons">music_note</i>
            </button>
            <button type="button" class="btn btn-primary">
              <i class="material-icons">star</i>
            </button>
            <button type="button" class="btn btn-success">
              <i class="material-icons">thumb_up</i>
            </button>
            <button type="button" class="btn btn-info">
              <i class="material-icons">keyboard</i>
            </button>
            <button type="button" class="btn btn-warning">
              <i class="material-icons">settings</i>
            </button>
            <button type="button" class="btn btn-light">
              <i class="material-icons mr-1">favorite</i> Favorite
            </button>
            <button type="button" class="btn btn-warning">
              <i class="material-icons mr-1">launch</i> Launch
            </button>
            <button type="button" class="btn btn-info">
              <i class="material-icons mr-1">cloud</i> Cloud Hosting
            </button>
          </div>
        </div>
        <div class="card-footer bg-dark">
          {% call hljs.component() -%}
<button type="button" class="btn btn-light">
  <i class="material-icons">favorite_border</i>
</button>

<button type="button" class="btn btn-light">
  <i class="material-icons mr-1">favorite</i> Favorite
</button>
          {%- endcall %}
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Circle</h4>
          <div class="card-subtitle">Circle Button</div>
        </div>
        <div class="card-body">
          <div class="button-list">
            <button type="button" class="btn btn-white btn-circle">
              <i class="material-icons">email</i>
            </button>
            <button type="button" class="btn btn-primary btn-circle">
              <i class="material-icons">person</i>
            </button>
            <button type="button" class="btn btn-secondary btn-circle">
              <i class="material-icons">mail_outline</i>
            </button>
            <button type="button" class="btn btn-success btn-circle">
              <i class="material-icons">list</i>
            </button>
            <button type="button" class="btn btn-info btn-circle">
              <i class="material-icons">notifications</i>
            </button>
            <button type="button" class="btn btn-warning btn-circle">
              <i class="material-icons">chevron_right</i>
            </button>
            <button type="button" class="btn btn-danger btn-circle">
              <i class="material-icons">home</i>
            </button>
          </div>
        </div>
        <div class="card-footer bg-dark">
          {% call hljs.component() -%}
<button type="button" class="btn btn-danger btn-circle">
  <i class="material-icons">home</i>
</button>
          {%- endcall %}
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Size</h4>
          <div class="card-subtitle">Button Size</div>
        </div>
        <div class="card-body">
          <p>Add <code>.btn-lg</code> or <code>.btn-sm</code> classes for additional button sizes.</p>
          <div class="button-list">
            <button type="button" class="btn btn-primary btn-lg">Large</button>
            <button type="button" class="btn btn-info">Normal</button>
            <button type="button" class="btn btn-success btn-sm">Small</button>
          </div>
        </div>
        <div class="card-footer bg-dark">
          {% call hljs.component() -%}
            <button type="button" class="btn btn-primary btn-lg">Large</button>
          {%- endcall %}
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Disabled</h4>
          <div class="card-subtitle">Disabled Buttons</div>
        </div>
        <div class="card-body">
          <p>Add the <code>disabled</code> attribute to disable buttons.</p>
          <div class="button-list">
            <button type="button" class="btn btn-info" disabled="">Info</button>
            <button type="button" class="btn btn-success" disabled="">Success</button>
            <button type="button" class="btn btn-danger" disabled="">Danger</button>
            <button type="button" class="btn btn-dark" disabled="">Dark</button>
          </div>
        </div>
        <div class="card-footer bg-dark">
          {% call hljs.component() -%}
            <button type="button" class="btn btn-info" disabled="">Info</button>
          {%- endcall %}
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Block</h4>
          <div class="card-subtitle">Button Block</div>
        </div>
        <div class="card-body">
          <p>Create block level buttons, by adding add <code>.btn-block</code>.</p>
          <button type="button" class="btn btn-block btn-primary">Block Button</button>
          <button type="button" class="btn btn-block btn-success">Block Button</button>
          <button type="button" class="btn btn-block btn-sm btn-info">Block Button</button>
        </div>
        <div class="card-footer bg-dark">
          {% call hljs.component() -%}
            <button type="button" class="btn btn-block btn-primary">Block Button</button>
          {%- endcall %}
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Dropdown</h4>
          <div class="card-subtitle">Button dropdown</div>
        </div>
        <div class="card-body button-list">
          <div class="btn-group">
            <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">White</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>
          <div class="btn-group">
            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Separated link</a>
            </div>
          </div>
        </div>
        <div class="card-footer bg-dark">
          {% call hljs.component() -%}
<div class="btn-group">
  <button type="button" class="btn btn-white dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">White</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
    <div class="dropdown-divider"></div>
    <a class="dropdown-item" href="#">Separated link</a>
  </div>
</div>
          {%- endcall %}
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Group</h4>
          <div class="card-subtitle">Button Group</div>
        </div>
        <div class="card-body">
          <p>Create a group of buttons by wrapping with <code>.btn-group</code>.</p>
          <div class="btn-group mb-2">
            <button type="button" class="btn btn-light">Left</button>
            <button type="button" class="btn btn-light">Middle</button>
            <button type="button" class="btn btn-light">Right</button>
          </div>
          <br>
          <div class="btn-group mb-2">
            <button type="button" class="btn btn-light">1</button>
            <button type="button" class="btn btn-light">2</button>
            <button type="button" class="btn btn-light">3</button>
            <button type="button" class="btn btn-light">4</button>
          </div>
          <div class="btn-group mb-2">
            <button type="button" class="btn btn-light">5</button>
            <button type="button" class="btn btn-light">6</button>
            <button type="button" class="btn btn-light">7</button>
          </div>
          <div class="btn-group mb-2">
            <button type="button" class="btn btn-light">8</button>
          </div>
          <br>
          <div class="btn-group mb-2">
            <button type="button" class="btn btn-light">1</button>
            <button type="button" class="btn btn-primary">2</button>
            <button type="button" class="btn btn-light">3</button>
            <div class="btn-group">
              <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Dropdown <span class="caret"></span> </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Dropdown link</a>
                <a class="dropdown-item" href="#">Dropdown link</a>
              </div>
            </div>
          </div>
          <br>
          <div class="d-lg-flex">
            <div class="btn-group-vertical mb-2 mr-lg-1">
              <button type="button" class="btn btn-light">Top</button>
              <button type="button" class="btn btn-light">Middle</button>
              <button type="button" class="btn btn-light">Bottom</button>
            </div>
            <div class="btn-group-vertical mb-2">
              <button type="button" class="btn btn-light">Button 1</button>
              <button type="button" class="btn btn-light">Button 2</button>
              <button type="button" class="btn btn-light dropdown-toggle" data-toggle="dropdown" aria-expanded="false"> Button 3 <span class="caret"></span> </button>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="#">Dropdown link</a>
                <a class="dropdown-item" href="#">Dropdown link</a>
              </div>
            </div>
          </div>
        </div>
        <div class="card-footer bg-dark">
          {% call hljs.component() -%}
<div class="btn-group">
  <button type="button" class="btn btn-light">Left</button>
  <button type="button" class="btn btn-light">Middle</button>
  <button type="button" class="btn btn-light">Right</button>
</div>
          {%- endcall %}
        </div>
      </div>
    </div>
  </div>

</div>