Button

Examples

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Buttons</div>
      </div>
    </div>
    <div class="page-content">
      <div class="block-title">Usual Buttons</div>
      <div class="block block-strong">
        <div class="row">
          <button class="button col">Button</button>
          <button class="button col">Button</button>
          <button class="button col button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Fill Buttons</div>
      <div class="block block-strong">
        <div class="row">
          <button class="col button button-fill">Button</button>
          <button class="col button button-fill">Button</button>
          <button class="col button button-fill button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Outline Buttons</div>
      <div class="block block-strong">
        <div class="row">
          <button class="col button button-outline">Button</button>
          <button class="col button button-outline">Button</button>
          <button class="col button button-outline button-round">Round</button>
        </div>
      </div>
      <div class="block-title">Raised Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-raised">Button</button>
          <button class="col button button-raised button-fill">Fill</button>
          <button class="col button button-outline button-raised">Outline</button>
        </p>
        <p class="row">
          <button class="col button button-raised button-round">Round</button>
          <button class="col button button-raised button-fill button-round">Fill</button>
          <button class="col button button-outline button-round button-raised">Outline</button>
        </p>
      </div>
      <div class="block-title">Segmented</div>
      <div class="block block-strong">
        <p class="segmented segmented-raised">
          <button class="button">Button</button>
          <button class="button">Button</button>
          <button class="button button-active">Active</button>
        </p>
        <p class="segmented segmented-strong">
          <button class="button">Button</button>
          <button class="button">Button</button>
          <button class="button button-active">Active</button>
          <span class="segmented-highlight"></span>
        </p>
        <p class="segmented">
          <button class="button button-outline">Outline</button>
          <button class="button button-outline">Outline</button>
          <button class="button button-outline button-active">Active</button>
        </p>
        <p class="segmented segmented-raised segmented-round">
          <button class="button button-round">Button</button>
          <button class="button button-round">Button</button>
          <button class="button button-round button-active">Active</button>
        </p>
        <p class="segmented segmented-round">
          <button class="button button-round button-outline">Outline</button>
          <button class="button button-round button-outline">Outline</button>
          <button class="button button-round button-outline button-active">Active</button>
        </p>
      </div>
      <div class="block-title">Large Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-large">Button</button>
          <button class="col button button-large button-fill">Fill</button>
        </p>
        <p class="row">
          <button class="col button button-large button-raised">Raised</button>
          <button class="col button button-large button-raised button-fill">Raised Fill</button>
        </p>
      </div>
      <div class="block-title">Small Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-small">Button</button>
          <button class="col button button-small button-outline">Outline</button>
          <button class="col button button-small button-fill">Fill</button>
        </p>
        <p class="row">
          <button class="col button button-small button-round">Button</button>
          <button class="col button button-small button-round button-outline">Outline</button>
          <button class="col button button-small button-round button-fill">Fill</button>
        </p>
      </div>
      <div class="block-title">Preloader Buttons</div>
      <div class="block block-strong">
        <button class="button button-large button-fill button-preloader ${isLoading ? 'button-loading' : ''}"
          @click=${load}>
          <span class="preloader"></span>
          <span>Load</span>
        </button>
      </div>
      <div class="block-title">Color Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button color-red">Red</button>
          <button class="col button color-green">Green</button>
          <button class="col button color-blue">Blue</button>
        </p>
        <p class="row">
          <button class="col button color-pink">Pink</button>
          <button class="col button color-yellow">Yellow</button>
          <button class="col button color-orange">Orange</button>
        </p>
        <p class="row">
          <button class="col button color-gray">Gray</button>
          <button class="col button color-black">Black</button>
        </p>
      </div>
      <div class="block-title">Color Fill Buttons</div>
      <div class="block block-strong">
        <p class="row">
          <button class="col button button-fill color-red">Red</button>
          <button class="col button button-fill color-green">Green</button>
          <button class="col button button-fill color-blue">Blue</button>
        </p>
        <p class="row">
          <button class="col button button-fill color-pink">Pink</button>
          <button class="col button button-fill color-yellow">Yellow</button>
          <button class="col button button-fill color-orange">Orange</button>
        </p>
        <p class="row">
          <button class="col button button-fill color-gray">Gray</button>
          <button class="col button button-fill color-black">Black</button>
          <button class="col button button-fill color-white text-color-black">White</button>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    let isLoading = false;

    const load = () => {
      isLoading = true;
      $update();
      setTimeout(() => {
        isLoading = false;
        $update();
      }, 3000);
    }

    return $render;
  }
</script>