CustomButton

CustomButton is a very simple button component that you can customize for your needs

How to install

Via npm

npm install yogawa-custom-button

Via yarn

yarn add yogawa-custom-button

How to use

Import the module

import { CustomButtonModule } from 'yogawa-custom-button';

@NgModule({
  ...
  imports: [
    CustomButtonModule
  ],
  ...
})

Create configuration object of CustomButtonConfig type

import { CustomButtonConfig } from 'yogawa-custom-button';

config: CustomButtonConfig = {
  theme: 'black',
  label: 'Click me',
  title: 'Sample button',
  disabled: false,
  size: 'lg',
  showTooltip: true,
  tooltipText: "Please click me",
  tabIndex: 0,
  borderRadius: '1rem',
}

onClick($event: Event) {
  console.log($event);
  alert("Hello world");
}

Use it ion your template

<custom-button [config]="config" (onClick)="onClick($event)"></custom-button>

Parameters

| parameter | type | required? | default | example | remark | |---------------|---------------------------------------------------|---------------|-------------|------------------------------------------------------|------------------------------------------| | label | string | yes | | 'Click me' | | | title | string | no | | 'Sample button' | | | disabled | boolean | no | false | true | | | size | 'sm' | 'lg' | 'responsive' | no | | 'lg' | | | showTooltip | boolean | no | false | true | | | tooltipText | string | no | | 'Please click me' | | | tabIndex | number | no | | 1 | | | theme | 'red' | 'green' | 'blue' | 'yellow' | 'black' | no | | 'black' | |