elzar/src/views/components/buttons.html

resmio glamourous style guide in sass mode

<h1><u>Buttons</u></h1>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button">Default Button</button>
<button type="button" class="btn-secondary">Cancel</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn-light">Light Button</button>
<button type="button" class="btn-link">Link Button</button>
<hr class="styleguide-separator"/>
<div class="navbar">
  <div class="navbar_title">
    <span>Something here</span>
  </div>
  <button type="button" class="btn-large">
    <svg viewBox="0 0 100 100" class="icon">
      <use xlink:href="#symbol-add"></use>
    </svg>
    <span class="btn_text">Add Booking</span>
  </button>
  <button type="button" class="btn-large">
    <svg viewBox="0 0 100 100" class="icon walkin_icon">
      <use xlink:href="#symbol-walkin"></use>
    </svg>
    <span class="btn_text">Add Walkin</span>
  </button>
  <button type="button" class="btn-large">Large Button</button>
</div>

<hr class="styleguide-separator"/>