Fork: 0
root / vmk-ui-kit
Transfer to URL with SHA Find file
Newer
Older
vmk-ui-kit / demo / partials / buttons.html
@Eugene Sukhodolskiy Eugene Sukhodolskiy 1 day ago 5 KB Implement Button component and Vue adapter
Raw Blame History 
<section class="demo-section">
  <h2>Buttons</h2>

  <h3>Variants</h3>
  <div class="demo-row">
    <button class="btn btn-primary btn-md">Primary</button>
    <button class="btn btn-secondary btn-md">Secondary</button>
    <button class="btn btn-tertiary btn-md">Tertiary</button>
    <button class="btn btn-accent btn-md">Accent</button>
    <button class="btn btn-success btn-md">Success</button>
    <button class="btn btn-warning btn-md">Warning</button>
    <button class="btn btn-info btn-md">Info</button>
    <button class="btn btn-danger btn-md">Danger</button>
    <button class="btn btn-error btn-md">Error</button>
  </div>

  <h3>Sizes</h3>
  <div class="demo-row">
    <button class="btn btn-primary btn-lg">Large</button>
    <button class="btn btn-primary btn-md">Medium</button>
    <button class="btn btn-primary btn-sm">Small</button>
    <button class="btn btn-primary btn-xs">Xsmall</button>
    <button class="btn btn-primary btn-xxs">XXsmall</button>
  </div>

  <h3>With icon</h3>
  <div class="demo-row">
    <button class="btn btn-primary btn-md with-icon">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
      Add item
    </button>
    <button class="btn btn-secondary btn-md with-icon">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
      Next
    </button>
    <button class="btn btn-tertiary btn-md with-icon">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
      New
    </button>
  </div>

  <h3>Icon only</h3>
  <div class="demo-row">
    <button class="btn btn-primary btn-md btn-icon-only" aria-label="Add">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5V19M5 12H19" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
    </button>
    <button class="btn btn-secondary btn-md btn-icon-only" aria-label="Next">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12H19M19 12L12 5M19 12L12 19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
    </button>
    <button class="btn btn-tertiary btn-md btn-icon-only" aria-label="Close">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
    </button>
  </div>

  <h3>States</h3>
  <div class="demo-row">
    <button class="btn btn-primary btn-md" disabled>Disabled</button>
    <button class="btn btn-secondary btn-md" disabled>Disabled</button>
    <button class="btn btn-tertiary btn-md" disabled>Disabled</button>
  </div>
  <div class="demo-row">
    <button class="btn btn-primary btn-md is-loading">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9999 2V6.44444M19.071 4.92893L15.9283 8.07163M22 12.0002H17.5555M19.071 19.071L15.9283 15.9283M11.9999 17.5556V22M8.07154 15.9284L4.92883 19.0711M6.44446 12.0002H2M7.99997 8L4.92895 4.92898" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
      Loading
    </button>
    <button class="btn btn-secondary btn-md is-loading">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9999 2V6.44444M19.071 4.92893L15.9283 8.07163M22 12.0002H17.5555M19.071 19.071L15.9283 15.9283M11.9999 17.5556V22M8.07154 15.9284L4.92883 19.0711M6.44446 12.0002H2M7.99997 8L4.92895 4.92898" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
      Loading
    </button>
    <button class="btn btn-tertiary btn-md is-loading">
      <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.9999 2V6.44444M19.071 4.92893L15.9283 8.07163M22 12.0002H17.5555M19.071 19.071L15.9283 15.9283M11.9999 17.5556V22M8.07154 15.9284L4.92883 19.0711M6.44446 12.0002H2M7.99997 8L4.92895 4.92898" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg></span>
      Loading
    </button>
  </div>

  <h3>Destructive variants</h3>
  <div class="demo-row">
    <button class="btn btn-danger btn-md">Danger primary</button>
    <button class="btn btn-danger-secondary btn-md">Danger secondary</button>
    <button class="btn btn-danger-tertiary btn-md">Danger tertiary</button>
  </div>
</section>