### File

`src/button/button.directive.ts`

### Description

A convinence directive for applying styling to a button.

See demo

Example:

     * <button ibmButton>A button</button>
     * <button ibmButton="secondary">A secondary button</button>
     *

See the vanilla carbon docs for more detail.

../../iframe.html?id=button--basic

### Implements

`OnInit`

### Metadata

Selector | `[ibmButton]`

### Index

###### Methods
ngOnInit
###### Inputs
ibmButton size skeleton
###### HostBindings
class.bx--btn class.bx--btn--danger class.bx--btn--field class.bx--btn--ghost class.bx--btn--primary class.bx--btn--secondary class.bx--btn--sm class.bx--btn--tertiary class.bx--overflow-menu class.bx--toolbar-action

### Inputs

`ibmButton` | sets the button type Type : `"primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--primary" | "toolbar-action"` Default value : `"primary"`
Defined in src/button/button.directive.ts:31

`size` | Specify the size of the button Type : `"normal" | "sm" | "field"` Default value : `"normal"`
Defined in src/button/button.directive.ts:35

`skeleton` | Default value : `false`
Defined in src/button/button.directive.ts:55

### HostBindings

class.bx--btn
`class.bx--btn: ```
Defined in src/button/button.directive.ts:37

class.bx--btn--danger
`class.bx--btn--danger: ```
Defined in src/button/button.directive.ts:52

class.bx--btn--field
`class.bx--btn--field: ```
Defined in src/button/button.directive.ts:59

class.bx--btn--ghost
`class.bx--btn--ghost: ```
Defined in src/button/button.directive.ts:49

class.bx--btn--primary
`class.bx--btn--primary: ```
Defined in src/button/button.directive.ts:40

class.bx--btn--secondary
`class.bx--btn--secondary: ```
Defined in src/button/button.directive.ts:43

class.bx--btn--sm
`class.bx--btn--sm: ```
Defined in src/button/button.directive.ts:56

class.bx--btn--tertiary
`class.bx--btn--tertiary: ```
Defined in src/button/button.directive.ts:46

class.bx--overflow-menu
`class.bx--overflow-menu: ```
Default value : `false`
Defined in src/button/button.directive.ts:63

class.bx--toolbar-action
`class.bx--toolbar-action: ```
Default value : `false`
Defined in src/button/button.directive.ts:62

### Methods

ngOnInit
`ngOnInit()`
Defined in src/button/button.directive.ts:65
Returns : `void`

    import {
    	Directive,
    	HostBinding,
    	Input,
    	OnInit
    } from "@angular/core";

    /**
     * A convinence directive for applying styling to a button.
     *
     * [See demo](../../?path=/story/button--basic)
     *
     * Example:
     *
     * ```html
     * <button ibmButton>A button</button>
     * <button ibmButton="secondary">A secondary button</button>
     * ```
     *
     * See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/button/code) for more detail.
     *
     * <example-url>../../iframe.html?id=button--basic</example-url>
     */
    @Directive({
    	selector: "[ibmButton]"
    })
    export class Button implements OnInit {
    	/**
    	 * sets the button type
    	 */
    	@Input() ibmButton: "primary" | "secondary" | "tertiary" | "ghost" | "danger" | "danger--primary" | "toolbar-action" = "primary";
    	/**
    	 * Specify the size of the button
    	 */
    	@Input() size: "normal" | "sm" | "field" = "normal";
    	// a whole lot of HostBindings ... this way we don't have to touch the elementRef directly
    	@HostBinding("class.bx--btn") get baseClass() {
    		return !this.toolbarAction;
    	}
    	@HostBinding("class.bx--btn--primary") get primaryButton() {
    		return this.ibmButton === "primary";
    	}
    	@HostBinding("class.bx--btn--secondary") get secondaryButton() {
    		return this.ibmButton === "secondary";
    	}
    	@HostBinding("class.bx--btn--tertiary") get tertiaryButton() {
    		return this.ibmButton === "tertiary";
    	}
    	@HostBinding("class.bx--btn--ghost") get ghostButton() {
    		return this.ibmButton === "ghost";
    	}
    	@HostBinding("class.bx--btn--danger") get dangerButton() {
    		return this.ibmButton === "danger" || this.ibmButton === "danger--primary";
    	}
    	@HostBinding("class.bx--skeleton") @Input() skeleton = false;
    	@HostBinding("class.bx--btn--sm") get smallSize() {
    		return this.size === "sm";
    	}
    	@HostBinding("class.bx--btn--field") get fieldSize() {
    		return this.size === "field";
    	}
    	@HostBinding("class.bx--toolbar-action") toolbarAction = false;
    	@HostBinding("class.bx--overflow-menu") overflowMenu = false;

    	ngOnInit() {
    		if (!this.ibmButton) {
    			this.ibmButton = "primary";
    		}
    	}
    }

# result-matching ""

# No results matching ""