@gavant/ember-button-basic

A simple and flexible <Button> Glimmer component, with built-in Bootstrap 4 and FontAwesome 5 integration.

Compatibility

• Ember.js v3.24 or above
• Ember CLI v3.24 or above
• Node.js v12 or above

Installation

ember install @gavant/ember-button-basic

NOTE: This addon uses FontAwesome 5 (@fortawesome/ember-fontawesome) for icon support. However it does NOT install any icon set packages. You must install these separately, following the addon's installation guide, e.g.

yarn add --dev @fortawesome/free-solid-svg-icons

Usage

An example <Button> usage, with all available arguments used. None of the component arguments are required, but in most cases you'll either want to provide a @label and/or @icon, or block content, and a click @action.

<Button
    @action={{function}}
    @label={{string}}
    @buttonType={{'button' | 'submit' | 'reset'}}
    @type={{'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'link' | 'light' | 'dark'}}
    @size={{'lg' | 'md' | 'sm' | 'xs'}}
    @blockLayout={{true | false}}
    @wide={{true | false}}
    @outline={{true | false}}
    @rounded={{true | false}}
    @circle={{true | false}}
    @iconOnly={{true | false}}
    @active={{true | false}}
    @disabled={{true | false}}
    @preventDefault={{true | false}}
    @stopPropagation={{true | false}}
    @icon={{string}}
    @iconPrefix={{string}}
    @iconClass={{string}}
    @iconSize={{'xs' | 'sm' | 'lg' | '2x' | '3x' | '4x' | '5x' | '6x'|  '7x' | '8x' | '9x' | '10x'}}
    @iconFlip={{'horizontal' | 'vertical' | 'both'}}
    @iconRotation={{90 | 180 | 270}}
    @iconSpin={{true | false}}
    @iconBorder={{true | false}}
    @iconFixedWidth={{true | false}}
/>

{{!-- block form is supported too --}}
<Button @action={{this.someAction}}>
    Look ma, block content!
</Button>

Using standard Glimmer component conventions, you can easily extend this component to add more advanced functionality. For example:

{{!-- app/components/button-with-tooltip --}}
<Button 
    @action={{@action}}
    @label={{@label}} 
    @type={{@type}}
    ...attributes
>
    {{yield}}
    {{#if @tooltip}}
        <EmberTooltip @side="right">
            {{@tooltip}}
        </EmberTooltip>
    {{/if}}
</Button>


{{!-- elsewhere in your app.., --}}
<ButtonWithTooltip @label="I have a toolip" @tooltip="This is the tooltip!" />

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.