ui-button.hbs

{{#if (or isRunning this.task.isRunning)}}
  <div class="inline-block mr-1">
    {{ui-loading style="white tiny"}}
  </div>
{{/if}}

{{#if hasBlock}}
  {{yield}}
{{else}}
  {{text}}
{{/if}}

ui-button.js

import { computed } from '@ember/object';
import Component from '@ember/component';
import { Styled, group } from 'ember-cli-ui-components';

export default Component.extend(Styled, {
  
  'on-click': null,
  task: null,

  isRunning: false,

  tagName: 'button',

  styles: {
    base: 'leading-tight pointer',

    defaultStyle: 'inline-block medium gray dim margins round',

    colors: group({
      gray: 'bg-black-10 text-black-80 font-medium',
      subtle: 'bg-black-10 text-black-40 font-medium',
      brand: 'border-none bg-brand-gradient text-white font-medium',
      warn: 'border-none bg-dark-red text-white font-semibold',
      white: 'font-normal bg-transparent border-solid border-2 border-white text-white',
      blue: 'border-none bg-blue text-white',
      'white-bg': 'font-normal bg-white text-near-black',
    }),

    active: 'bg-light-red text-white',

    sizes: group({
      small: 'text-7 sm:text-6 py-1 sm:py-2 px-2 sm:px-3',
      medium: 'text-6 sm:text-4 py-2 sm:py-3 px-3 sm:px-4',
      large: 'text-6 sm:text-4 py-3 px-3 sm:px-4'
    }),

    'nowrap': 'whitespace-no-wrap',

    floating: 'shadow-l',

    behavior: group({
      dim: 'dim',
      disabled: 'opacity-50'
    }),

    margins: group({
      margins: 'mt-2 mb-3',
      marginless: ''
    }),

    uppercase: 'uppercase',

    radii: group({
      round: 'rounded-2',
      pill: 'rounded-pill',
      append: 'rounded-r'
    }),

    full: 'w-full',

    displays: group({
      block: 'block',
      'inline-block': 'inline-block'
    }),

    input: {
      tagName: 'input'
    },

    link: {
      style: 'no-underline',
      tagName: 'a'
    }
  },

  attributeBindings: ['href', 'type', 'value', 'disabled'],

  isSubmit: computed('activeStyles', function() {
    return this.get('activeStyles').includes('input');
  }),

  isLink: computed('activeStyles', function() {
    return this.get('activeStyles').includes('link');
  }),

  type: computed('isSubmit', function() {
    if (this.get('isSubmit')) {
      return 'submit';
    } else if (this.get('isLink')) {
      return '';
    } else {
      return 'button';
    }
  }),

  click(event) {
    let action = this.get('on-click');
    let task = this.get('task');

    if (action) {
      event.preventDefault();
      action();
    } else if (task) {
      event.preventDefault();
      task.perform();
    }
  }
});