# button
button is a component which provides basic button appearance.
Submit
## Requirements
* Install the component to your project
```bash
npm install @vendasta/fec-button [--save]
```
* Next, you will need to import your button in whatever module you wish to use it in:
```typescript
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).
```typescript
import {Component} from "@angular/core";
@Component({
...
template: `
Submit
`
})
...
```
## Events
To include an event, you can use the Angular2 (click) event:
```typescript
Submit
```
And within the class of whatever component you are using, you can include the function which is called by the click event:
```typescript
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:
Primary Secondary Positive Negative
```html
Primary
Secondary
Positive
Negative
```
## 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.
Primary Secondary Positive Negative
```html
Primary
Secondary
Positive
Negative
```
## Sizes
The size modifiers allow control over how small or large the buttons appear:
Small Regular Large Call to Action
```html
Small
Regular
Large
Call to Action
```
## Miscellaneous States
Buttons can also be modified to display a loading or disabled state:
Primary Disabled
```html
Disabled
```
More commonly, you will be adding the va-btn-loading conditionally:
```html
```
You can then toggle the loading button within the class using the a variable:
```typescript
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.