### File

`projects/commons/src/lib/elements/buttons/components/button.component.ts`

### Implements

`OnInit`

### Metadata

selector | `cmn-button`
styleUrls | `./button.component.scss`
templateUrl | `./button.component.html`

### Index

###### Properties
Public sizeIcon
###### Methods
Public ngOnInit
###### Inputs
badge class isDisabled isLoading label leftIcon rightIcon size type

### Inputs

badge
Type : `IBadge`
Defined in projects/commons/src/lib/elements/buttons/components/button.component.ts:14

class
Type : `string`
Defined in projects/commons/src/lib/elements/buttons/components/button.component.ts:20

isDisabled
Type : `boolean`
Defined in projects/commons/src/lib/elements/buttons/components/button.component.ts:19

isLoading
Type : `boolean`
Defined in projects/commons/src/lib/elements/buttons/components/button.component.ts:18

label
Type : `string`
Defined in projects/commons/src/lib/elements/buttons/components/button.component.ts:15

leftIcon
Type : `string`
Defined in projects/commons/src/lib/elements/buttons/components/button.component.ts:16

rightIcon
Type : `string`
Defined in projects/commons/src/lib/elements/buttons/components/button.component.ts:17

size
Type : `Sizes`
Defined in projects/commons/src/lib/elements/buttons/components/button.component.ts:13

type
Type : `string`
Default value : `'button'`
Defined in projects/commons/src/lib/elements/buttons/components/button.component.ts:21

### Methods

Public ngOnInit
`ngOnInit()`
Defined in projects/commons/src/lib/elements/buttons/components/button.component.ts:25
Returns : `void`

### Properties

Public sizeIcon
Type : `string`
Defined in projects/commons/src/lib/elements/buttons/components/button.component.ts:23

    import { Component, Input, OnInit } from '@angular/core';

    import { Sizes } from '../../../shared/enums';
    import { IBadge } from '../../badge/interfaces';

    @Component({
        selector: 'cmn-button',
        templateUrl: './button.component.html',
        styleUrls: [ './button.component.scss' ],
    })

    export class ButtonComponent implements OnInit {
        @Input() public readonly size: Sizes;
        @Input() public readonly badge: IBadge;
        @Input() public readonly label: string;
        @Input() public readonly leftIcon: string;
        @Input() public readonly rightIcon: string;
        @Input() public readonly isLoading: boolean;
        @Input() public readonly isDisabled: boolean;
        @Input('class') public readonly clazz: string;
        @Input() public readonly type: string = 'button';

        public sizeIcon: string;

        public ngOnInit(): void {}
    }

    <button [type]="type"
            [cmnBadge]="badge?.label"
            [color]="badge?.color"
            class="button {{ clazz }} {{ size }}"
            [class.is-loading]="isLoading"
            [disabled]="isDisabled || isLoading">
        <span class="icon {{ sizeIcon }}"
              *ngIf="leftIcon">
          <i class="{{ leftIcon }}"></i>
        </span>

        <span>
            {{ label }}
        </span>

        <span class="icon {{ sizeIcon }}"
              *ngIf="rightIcon">
          <i class="{{ rightIcon }}"></i>
        </span>
    </button>

`./button.component.scss`

Legend
Html element
Component
Html element with directive

# result-matching ""

# No results matching ""