@vendasta/fec-button v1.0.0

button

button is a component which provides basic button appearance.

Requirements

• Install the component to your project

npm install @vendasta/fec-button [--save]

• Next, you will need to import your button in whatever module you wish to use it in:

import { ButtonComponent } from '@vendasta/fec-button/button.component';
...
@NgModule({
    ...
    declarations: [ ButtonComponent ]
})

Usage

The above will provide the bare minimum to reach compilation. To use the button, we must then include the va-btn tag (with some of it's optional css selectors, ex. va-btn-primary).

import {Component} from "@angular/core";

@Component({
    ...
    template: `
        <va-btn va-btn-primary>Submit</va-btn>
    `
})
...

Events

To include an event, you can use the Angular2 (click) event:

<va-btn va-btn-primary (click)="onClick($event)">Submit</va-btn>

And within the class of whatever component you are using, you can include the function which is called by the click event:

class usingVaButton {
    onClick(event) {
        // doSomething
    }
}

Types of Actions

The type modifiers change how the button looks to indicate the kind of action that will be taken:

<va-btn va-btn-primary>Primary</va-btn>
<va-btn va-btn-secondary>Secondary</va-btn>
<va-btn va-btn-positive>Positive</va-btn>
<va-btn va-btn-negative>Negative</va-btn>

Elevation

The va-btn-raised class can be used to give the button a level of elevation above the page. Once the button is pressed, it moves down subtly to indicate user interaction.

<va-btn va-btn-primary va-btn-raised>Primary</va-btn>
<va-btn va-btn-secondary va-btn-raised>Secondary</va-btn>
<va-btn va-btn-positive va-btn-raised>Positive</va-btn>
<va-btn va-btn-negative va-btn-raised>Negative</va-btn>

Sizes

The size modifiers allow control over how small or large the buttons appear:

<va-btn va-btn-primary va-btn-small>Small</va-btn>
<va-btn va-btn-primary>Regular</va-btn>
<va-btn va-btn-primary va-btn-large>Large</va-btn>
<va-btn va-btn-primary va-btn-cta>Call to Action</va-btn>

Miscellaneous States

Buttons can also be modified to display a loading or disabled state:

<va-btn va-btn-primary va-btn-loading></va-btn>
<va-btn va-btn-secondary va-btn-disabled>Disabled</va-btn>

More commonly, you will be adding the va-btn-loading conditionally:

<va-btn va-btn-primary [attr.va-btn-loading]="someVariable" (click)="someToggleFunction()"></va-btn>

You can then toggle the loading button within the class using the a variable:

someVariable:boolean;

someToggleFunction() {
    if(this.someVariable) {
        this.someVariable = null;
    }
    else {
        this.someVariable = true;
    }
}

It's important to note that attr.some-attr operates on true and null, not true and false.