Button

Example

Style & Size

Primary

Secondary

Tertiary

Action

widthMode

Diabled

Source Code

<template>
  <div class="button-preview">
    <div>
      <h3>Style & Size</h3>
      <div>
        <div>Primary</div>
        <c-button
          button-style="primary"
          size="large"
        >
          large
        </c-button>
        <c-button
          button-style="primary"
          size="medium"
        >
          medium
        </c-button>
        <c-button
          button-style="primary"
          size="small"
        >
          small
        </c-button>
      </div>
      <div>
        <div>Secondary</div>
        <c-button
          button-style="secondary"
          size="large"
        >
          large
        </c-button>
        <c-button
          button-style="secondary"
          size="medium"
        >
          medium
        </c-button>
        <c-button
          button-style="secondary"
          size="small"
        >
          small
        </c-button>
      </div>
      <div>
        <div>Tertiary</div>
        <c-button
          button-style="tertiary"
          size="large"
        >
          large
        </c-button>
        <c-button
          button-style="tertiary"
          size="medium"
        >
          medium
        </c-button>
        <c-button
          button-style="tertiary"
          size="small"
        >
          small
        </c-button>
      </div>
      <div>
        <div>Action</div>
        <c-button
          button-style="action"
          size="large"
        >
          large
        </c-button>
        <c-button
          button-style="action"
          size="medium"
        >
          medium
        </c-button>
        <c-button
          button-style="action"
          size="small"
        >
          small
        </c-button>
      </div>
    </div>
    <div>
      <h3>widthMode</h3>
      <div>
        <c-button width-mode="responsive">
          responsive
        </c-button>
        <c-button width-mode="fixed" width="200px">
          fixed: 200px
        </c-button>
        <c-button width-mode="full">
          full
        </c-button>
      </div>
    </div>
    <div>
      <h3>Diabled</h3>
      <c-button>Normal</c-button>
      <c-button :disabled="true">
        Disabled
      </c-button>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.button-preview {
  button {
    margin: 5px;
  }
}
</style>

slots

...

props

...