src/button/button.directive.ts
A convenience directive for applying styling to a button. Get started with importing the module:
Example :import { ButtonModule } from 'carbon-components-angular';Example:
Example :<button cdsButton>A button</button>
<button cdsButton="secondary">A secondary button</button>See the vanilla carbon docs for more detail.
| Selector | [cdsButton], [ibmButton] |
| cdsButton | |
Type : ButtonType | string
|
|
Default value : "primary"
|
|
|
Defined in src/button/button.directive.ts:41
|
|
|
Sets the button type
Accepts |
|
| ibmButton | |
Type : ButtonType
|
|
|
Defined in src/button/button.directive.ts:33
|
|
| iconOnly | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/button/button.directive.ts:55
|
|
|
Set to |
|
| isExpressive | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/button/button.directive.ts:60
|
|
|
Set to |
|
| size | |
Type : ButtonSize
|
|
|
Defined in src/button/button.directive.ts:45
|
|
|
Specify the size of the button |
|
| skeleton | |
Type : boolean
|
|
Default value : false
|
|
|
Defined in src/button/button.directive.ts:49
|
|
|
Set to |
|
| class.cds--btn |
Type : boolean
|
Default value : true
|
|
Defined in src/button/button.directive.ts:63
|
| class.cds--btn--2xl |
Type : boolean
|
|
Defined in src/button/button.directive.ts:100
|
| class.cds--btn--danger |
Type : boolean
|
|
Defined in src/button/button.directive.ts:76
|
| class.cds--btn--danger--ghost |
Type : boolean
|
|
Defined in src/button/button.directive.ts:82
|
| class.cds--btn--danger--tertiary |
Type : boolean
|
|
Defined in src/button/button.directive.ts:79
|
| class.cds--btn--ghost |
Type : boolean
|
|
Defined in src/button/button.directive.ts:73
|
| class.cds--btn--lg |
Type : boolean
|
|
Defined in src/button/button.directive.ts:94
|
| class.cds--btn--md |
Type : boolean
|
|
Defined in src/button/button.directive.ts:91
|
| class.cds--btn--primary |
Type : boolean
|
|
Defined in src/button/button.directive.ts:64
|
| class.cds--btn--secondary |
Type : boolean
|
|
Defined in src/button/button.directive.ts:67
|
| class.cds--btn--sm |
Type : boolean
|
|
Defined in src/button/button.directive.ts:88
|
| class.cds--btn--tertiary |
Type : boolean
|
|
Defined in src/button/button.directive.ts:70
|
| class.cds--btn--xl |
Type : boolean
|
|
Defined in src/button/button.directive.ts:97
|
| class.cds--layout--size-2xl |
Type : boolean
|
|
Defined in src/button/button.directive.ts:117
|
| class.cds--layout--size-lg |
Type : boolean
|
|
Defined in src/button/button.directive.ts:111
|
| class.cds--layout--size-md |
Type : boolean
|
|
Defined in src/button/button.directive.ts:108
|
| class.cds--layout--size-sm |
Type : boolean
|
|
Defined in src/button/button.directive.ts:105
|
| class.cds--layout--size-xl |
Type : boolean
|
|
Defined in src/button/button.directive.ts:114
|
| baseClass |
Default value : true
|
Decorators :
@HostBinding('class.cds--btn')
|
|
Defined in src/button/button.directive.ts:63
|
| ibmButton | ||||||
setibmButton(type: ButtonType)
|
||||||
|
Defined in src/button/button.directive.ts:33
|
||||||
|
Parameters :
Returns :
void
|
| primaryButton |
getprimaryButton()
|
|
Defined in src/button/button.directive.ts:64
|
| secondaryButton |
getsecondaryButton()
|
|
Defined in src/button/button.directive.ts:67
|
| tertiaryButton |
gettertiaryButton()
|
|
Defined in src/button/button.directive.ts:70
|
| ghostButton |
getghostButton()
|
|
Defined in src/button/button.directive.ts:73
|
| dangerButton |
getdangerButton()
|
|
Defined in src/button/button.directive.ts:76
|
| dangerTertiary |
getdangerTertiary()
|
|
Defined in src/button/button.directive.ts:79
|
| dangerGhost |
getdangerGhost()
|
|
Defined in src/button/button.directive.ts:82
|
| smallSize |
getsmallSize()
|
|
Defined in src/button/button.directive.ts:88
|
|
|
| mediumSize |
getmediumSize()
|
|
Defined in src/button/button.directive.ts:91
|
| largeSize |
getlargeSize()
|
|
Defined in src/button/button.directive.ts:94
|
| extraLargeSize |
getextraLargeSize()
|
|
Defined in src/button/button.directive.ts:97
|
| twoExtraLargeSize |
gettwoExtraLargeSize()
|
|
Defined in src/button/button.directive.ts:100
|
| smallLayoutSize |
getsmallLayoutSize()
|
|
Defined in src/button/button.directive.ts:105
|
| mediumLayoutSize |
getmediumLayoutSize()
|
|
Defined in src/button/button.directive.ts:108
|
| largeLayoutSize |
getlargeLayoutSize()
|
|
Defined in src/button/button.directive.ts:111
|
| extraLargeLayoutSize |
getextraLargeLayoutSize()
|
|
Defined in src/button/button.directive.ts:114
|
| twoExtraLargeLayoutSize |
gettwoExtraLargeLayoutSize()
|
|
Defined in src/button/button.directive.ts:117
|
import {
Directive,
HostBinding,
Input
} from "@angular/core";
import { ButtonSize, ButtonType } from "./button.types";
/**
* A convenience directive for applying styling to a button. Get started with importing the module:
*
* ```typescript
* import { ButtonModule } from 'carbon-components-angular';
* ```
*
* Example:
*
* ```html
* <button cdsButton>A button</button>
* <button cdsButton="secondary">A secondary button</button>
* ```
*
* See the [vanilla carbon docs](http://www.carbondesignsystem.com/components/button/code) for more detail.
*
* [See demo](../../?path=/story/components-button--basic)
*/
@Directive({
selector: "[cdsButton], [ibmButton]"
})
export class Button {
/**
* @deprecated as of v5 - Use `cdsButton` input property instead
*/
@Input() set ibmButton(type: ButtonType) {
this.cdsButton = type;
}
/**
* Sets the button type
* Accepts `ButtonType` or nothing (empty string which is equivalent to "primary")
* Empty string has been added as an option for Angular 16+ to resolve type errors
*/
@Input() cdsButton: ButtonType | "" = "primary";
/**
* Specify the size of the button
*/
@Input() size: ButtonSize;
/**
* Set to `true` for a skeleton state button
*/
@HostBinding("class.cds--skeleton") @Input() skeleton = false;
/**
* Set to `true` if the button contains only an icon
* This should only be used for creating custom icon buttons, otherwise use
* `<cds-icon-button></cds-icon-button>` component
*/
@HostBinding("class.cds--btn--icon-only") @Input() iconOnly = false;
/**
* Set to `true` for a "expressive" style button
*/
@HostBinding("class.cds--btn--expressive") @Input() isExpressive = false;
// a whole lot of HostBindings ... this way we don't have to touch the elementRef directly
@HostBinding("class.cds--btn") baseClass = true;
@HostBinding("class.cds--btn--primary") get primaryButton() {
return this.cdsButton === "primary" || !this.cdsButton;
}
@HostBinding("class.cds--btn--secondary") get secondaryButton() {
return this.cdsButton === "secondary";
}
@HostBinding("class.cds--btn--tertiary") get tertiaryButton() {
return this.cdsButton === "tertiary";
}
@HostBinding("class.cds--btn--ghost") get ghostButton() {
return this.cdsButton === "ghost";
}
@HostBinding("class.cds--btn--danger") get dangerButton() {
return this.cdsButton === "danger" || this.cdsButton === "danger--primary";
}
@HostBinding("class.cds--btn--danger--tertiary") get dangerTertiary() {
return this.cdsButton === "danger--tertiary";
}
@HostBinding("class.cds--btn--danger--ghost") get dangerGhost() {
return this.cdsButton === "danger--ghost";
}
/**
* @todo remove `cds--btn--${size}` classes in v12
*/
@HostBinding("class.cds--btn--sm") get smallSize() {
return this.size === "sm" && !this.isExpressive;
}
@HostBinding("class.cds--btn--md") get mediumSize() {
return this.size === "md" && !this.isExpressive;
}
@HostBinding("class.cds--btn--lg") get largeSize() {
return this.size === "lg";
}
@HostBinding("class.cds--btn--xl") get extraLargeSize() {
return this.size === "xl";
}
@HostBinding("class.cds--btn--2xl") get twoExtraLargeSize() {
return this.size === "2xl";
}
// Size classes
@HostBinding("class.cds--layout--size-sm") get smallLayoutSize() {
return this.size === "sm" && !this.isExpressive;
}
@HostBinding("class.cds--layout--size-md") get mediumLayoutSize() {
return this.size === "md" && !this.isExpressive;
}
@HostBinding("class.cds--layout--size-lg") get largeLayoutSize() {
return this.size === "lg";
}
@HostBinding("class.cds--layout--size-xl") get extraLargeLayoutSize() {
return this.size === "xl";
}
@HostBinding("class.cds--layout--size-2xl") get twoExtraLargeLayoutSize() {
return this.size === "2xl";
}
}