@broadstone/clib-button NPM

BUTTON

Angular version 8.2.14.

How to use

npm i @broadstone/clib-button

ADD to app.module.ts

import { ClibButtonModule } from '@broadstone/clib-button';
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    ClibButtonModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})

ADD in .html EXAMPLE HERE

https://www.figma.com/file/TR0O6YPVnMELuwwifhnV0Z/buttons?node-id=0%3A1

Inside Component

@Input() label: string;
@Input() size: any;
@Input() disabled: boolean = false;
@Input() loading: boolean = false;
@Input() type: 'filled' | 'outline' = 'filled';
@Input() color: 'primary' | 'secondary' | 'tertiary' | 'dark' | 'warning' | 'danger' = 'primary';
@Input() icon: string = '';
@Output() pressAction: EventEmitter<any> = new  EventEmitter();

Colors --string base on cornerstone Variables Must be defined in project styles.scss

:root {
  --color_primary: #1dc7b2;
  --color_secondary_1: #c4efea;
  --color_secondary: #ebfffc;
  --color_primary_intense: #1fa695;

  --color_grey_1: #4a4a4a;
  --color_grey_2: #9b9b9b;
  --color_grey_3: #9aa5b1;
  --color_grey_4: #d0d8e0;
  --color_grey_5: #e6e6e6;
  --color_grey_6: #f0f0f0;
  --color_grey_7: #fbfcfd;
  --color_grey_8: #f7f7f7;

  --color_yellow: #ffcf57;
  --color_danger: #fd6d6d;
  --color_purple: #9013fe;
  --color_white: #fff;
  --color_black: #000;

  --color_blue_light: #fbfdff;

  --color_grey_2_ultra: rgba(155, 155, 155, 0.25); // light_gray with 0.25 opacity
  --shadow_color: rgba(0, 0, 0, 0.2);
  --shadow_color_light: rgba(228, 228, 228, 0.5);
}