BaseButton

An unstyled component to handle button basics. BaseButton is intended as a building block. Library consumers may use it if they have requirements not fulfilled by the branded options.

Example Usage

<template>
  <div class="flex items-center space-x-2">
    <BaseButton
        ref="baseBtn"
        :busy="loading"
        :disabled="disabled"
        @click="loading=true; disabled=true;"
        v-slot="{busy, disabled}"
        :class="btnClasses"
    >
      Loading: {{busy}}
    </BaseButton>
    <BaseButton
      @click="loading=false; disabled=false"
      :class="btnClasses"
    >
      Reset loading
    </BaseButton>
  </div>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import { BaseButton } from '@ais-public/ais-components';

  let loading = ref(false);
  let disabled = ref(false);

  // Template ref, see ref="baseBtn"
  let baseBtn = ref(null);

  onMounted(() => {
    // Unwrap template ref
    const btn = baseBtn.value;
    console.log('Access to button element', btn.$el);

    // Call exposed method on component
    btn.focus();
  });

  const btnClasses = ref(`
    px-2.5 py-1 text-sm border
    border-ui-gray border-opacity-50 rounded-md
    hover:shadow-sm active:shadow-inner
    focus:ring-2 focus:ring-ui-gold focus:outline-0
    active:ring-transparent disabled:opacity-50
`);
</script>

Component Props

import { expectedValues } from "@/util/prop-validators";

export const baseProps = {

  // button type attribute
  type: {
    type: String, required: false, default: 'button',

    validator: expectedValues(
      'button', 'submit', 'reset'
    )
  },

  // disabled attribute. The default value of undefined is important for testing.
  // At times `disabled="false"` will be interpreted as disabled having a value.
  disabled: { type: Boolean, required: false, default: undefined },

  // Action in progress -- i.e. saving or loading
  busy: { type: Boolean, required: false, default: false },

  // UIDS arrow to the right
  arrow: { type: Boolean, required: false, default: false },

  /**
   * The `to` prop accepts a vue-router location definition.
   * Button will route to location on click. The click event
   * will not be emitted.
   *
   * todo: should we emit the click event?
   *
   * See: https://router.vuejs.org/guide/essentials/navigation.html
   */
  to: { required: false, default: undefined },

  /**
   * Don't blur() on click if true
   */
  keepFocus: { type: Boolean, required: false, default: false },
}