Button

cf-button

CF Button has two features that makes it special. The fact that you can pass and icon name and position to the button and it renders is automatically, as well as having a waiting state.

Basic Usage

<!-- Example of a simple button with just a label -->
<cf-button label="Press Me"></cf-icon>

<!-- Example of a button with an icon -->
<cf-button label="Close" iconName="close" iconPosition="left"></cf-icon>

Waiting State

app.html

<cf-button label="Reload" [waitingButton]="myWaitingState"></cf-icon>

app.ts

waitingIcon = {
    name: "fa-spinner",
    type: "fa",
    size: "20px"
}

myWaitingState = {
    value: true, // can be of type any
    disabled: true, // disable or enable button when waiting
    iconProperty: this.waitingIcon
}

Properties and Styling

app.html

<cf-button [properties]="myProperties" [styling]="myStyling"></cf-button>

app.ts

// Structure of the properties object passed to the component 
myProperties = {
    "display": boolean, // Default: True,
    "disable": boolean, // Default: False,
    "iconPosition": string, // Default: 'left'
    "label": string, // Default: 'Button'
    "iconProperty": iconProperty //object of type object property documented on icon component,
    "waiting": {
        "value": boolean,
        "disabled": boolean,
        "iconProperty":iconProperty
    }
}

// Structure of the styling object passed to the component 
myStyling = {

    // styling of the container surrounding the icon
    "container": {
            "dynamic class": function() -> string, //function that returns a string of the name of the class
            "class":string //name of the class specified in you scss/css file
        },

    // styling of the icon
    "button": {
            "dynamic class": function() -> string, 
            "class": string ,
            "themeColor": string , // primary/accent/warn
        }

    // styling of the icon if there is any specified same structure as that of the icon styling
    "iconStyling": {iconStyling structure}
}

Input Properties

Attr	Type	Details
display	boolean	If true, the icon will be displayed else the icon will be hidden. By default it's value is true
disabled	boolean	If true the button will be disabled. By default it's value is false
label	string	Label to be displayed on the button
iconName	string	Name of the icon, material or font aweesome name.
iconPosition	string	Position of the icon, by default it's on the left
waitingButton	any	Object with 3 attributes: value, disabled, iconProperty. Activated when the button is clicked.