WtButton

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
color		ButtonColor	ButtonColor.PRIMARY
disabled		boolean	false
loading		boolean	false
size		ComponentSize	ComponentSize.MD
wide		boolean	false
widthByContent		boolean	false
icon		string	''
iconPrefix		string	''
badge		string	-
badgeSeverity		BadgeSeverity	-
badgeAbsolutePosition		boolean	-
variant		ButtonVariant	ButtonVariant.ACTIVE

Events

Name	Params	Description
click

Slots

Name	Scope	Description
default
badge

Primevue docs

PrimevueButton

Button

Code

<script setup>
import { ref } from 'vue';

const loading = ref(false);

const load = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 0);
};
</script>

<template>
  <wt-button :loading="loading" @click="load">
    Click me for loading
  </wt-button>
</template>

Different colors

Code

<script setup>
import { ref } from 'vue';
import { ButtonVariant } from '../../../../../../../src/enums';

const tabs = [
  {
    text: 'Active',
    value: ButtonVariant.ACTIVE,
  },
  {
    text: 'Outlined',
    value: ButtonVariant.OUTLINED,
  },
  {
    text: 'Text',
    value: ButtonVariant.TEXT,
  },
]

const currentVariant = ref(tabs[0]);
</script>

<template>
  <wt-tabs 
    :current="currentVariant"
    :tabs="tabs"
    wide
    @change="currentVariant = $event"
  />
  <div
    style="display: grid; grid-template-columns: 140px; gap: var(--spacing-xs); margin-top: 20px;"
  >
    <wt-button :variant="currentVariant.value">Primary</wt-button>
    <wt-button color="secondary" :variant="currentVariant.value"> Secondary </wt-button>
    <wt-button disabled :variant="currentVariant.value"> Disabled </wt-button>
    <wt-button color="success" :variant="currentVariant.value"> Success </wt-button>
    <wt-button color="error" :variant="currentVariant.value"> Error </wt-button>
    <wt-button color="transfer" :variant="currentVariant.value"> Transfer </wt-button>
    <wt-button color="job" :variant="currentVariant.value"> Job </wt-button>
    <wt-button color="info" :variant="currentVariant.value"> info </wt-button>
  </div>
</template>

<style scoped lang="scss"></style>

Small button

Code

<script setup></script>

<template>
  <wt-button size="sm"> Small button </wt-button>
</template>

<style scoped lang="scss"></style>

Wide button

Code

<script setup></script>

<template>
  <wt-button wide> Wide button </wt-button>
</template>

<style scoped lang="scss"></style>

Different colors with loaders

Code

<script setup></script>

<template>
  <div
    style="display: grid; grid-template-columns: 140px; gap: var(--spacing-xs)"
  >
    <wt-button loading> Primary </wt-button>
    <wt-button
      color="secondary"
      loading
    >
      Secondary
    </wt-button>
    <wt-button
      disabled
      loading
    >
      Disabled
    </wt-button>
    <wt-button
      color="success"
      loading
    >
      Success
    </wt-button>
    <wt-button
      color="error"
      loading
    >
      Error
    </wt-button>
    <wt-button
      color="transfer"
      loading
    >
      Transfer
    </wt-button>
    <wt-button
      color="job"
      loading
    >
      Job
    </wt-button>
    <wt-button
      color="info"
      loading
    >
      info
    </wt-button>
  </div>
</template>

<style scoped lang="scss"></style>

Icon button

Code

<script setup>
import { ref } from 'vue';
import { ButtonVariant, ComponentSize } from '../../../../../../../src/enums';

const loading = ref(false);

const colors = [
  'primary',
  'secondary',
  'success',
  'warn',
  'error',
  'info',
  'job',
  'transfer',
];

const tabs = [
  {
    text: 'XS',
    value: ComponentSize.XS,
  },
  {
    text: 'SM',
    value: ComponentSize.SM,
  },
  {
    text: 'MD',
    value: ComponentSize.MD,
  },
]

const currentSize = ref(tabs[0]);

const load = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
  }, 0);
};
</script>

<template>
  <wt-tabs :current="currentSize" :tabs="tabs" wide @change="currentSize = $event" />
  <div class="flex gap-2 mt-2">
    <wt-button v-for="color in colors" :key="color" :color="color" :loading="loading" icon="call"
      :variant="ButtonVariant.ACTIVE" :size="currentSize.value" @click="load" />
  </div>
  <div class="flex gap-2 mt-2">
    <wt-button v-for="color in colors" :key="color" :color="color" :loading="loading" icon="call"
      :variant="ButtonVariant.ACTIVE" :size="currentSize.value" rounded @click="load" />
  </div>
  <div class="flex gap-2 mt-2">
    <wt-button v-for="color in colors" :key="color" :color="color" :loading="loading" icon="call"
      :variant="ButtonVariant.OUTLINED" :size="currentSize.value" @click="load" />
  </div>
</template>

Icon button disabled

Code

<script setup>
import { ref } from 'vue';
import { ButtonVariant, ComponentSize } from '../../../../../../../src/enums';

const tabs = [
  {
    text: 'XS',
    value: ComponentSize.XS,
  },
  {
    text: 'SM',
    value: ComponentSize.SM,
  },
  {
    text: 'MD',
    value: ComponentSize.MD,
  },
]

const currentSize = ref(tabs[0]);
</script>

<template>
  <wt-tabs :current="currentSize" :tabs="tabs" wide @change="currentSize = $event" />
  <div class="flex py-4 gap-2">
    <wt-button disabled icon="call" :variant="ButtonVariant.ACTIVE" :size="currentSize.value" />
    <wt-button disabled icon="call" :variant="ButtonVariant.ACTIVE" :size="currentSize.value" rounded />
    <wt-button disabled icon="call" :variant="ButtonVariant.OUTLINED" :size="currentSize.value" />
  </div>
</template>