### File

`packages/ecl/components/ecl-button/ecl-button.component.ts`

### Description

Button component based on ECL design system. Can render as a `<button>` or `<a>` element depending on usage. Supports multiple visual variants and optional icon/indicator content.

### Extends

`ECLBaseDirective`

### Implements

`AfterViewInit`

### Metadata

selector | `button[eclButton], button[ecl-button], a[eclButton]`
imports | `NgTemplateOutlet` `EUI_ECL_ICON`
templateUrl | `./ecl-button.component.html`

### Index

###### Properties
Public el iconComponents indicator
###### Methods
onFocus getCssClasses
###### Inputs
containerStyleClass isIconOnly variant class e2eAttr tabindex
###### HostBindings
class
###### Accessors
cssClasses hasIcon hasIndicator

### Constructor

`constructor(el: ElementRef)`
Parameters :
Name | Type | Optional
el | `ElementRef` | No

### Inputs

containerStyleClass
Type : `string`
Optional additional class to apply to the button container.

isIconOnly
Type : `boolean`
Default value : `false`
Whether the button should be styled as icon-only. When true, the `ecl-button--icon-only` class is applied.

variant
Type : `"primary" | "secondary" | "tertiary" | "cta" | "ghost" | "ghost-inverted"`
Default value : `'primary'`
Visual variant of the button. Can be 'primary', 'secondary', 'tertiary', 'cta', 'ghost', or 'ghost-inverted'. Defaults to 'primary'.

class
Type : `string`

e2eAttr
Type : `any`

tabindex
Type : `number`

### HostBindings

class
Type : `string`
Computes the full set of CSS classes to apply to the button element.

### Methods

onFocus
`onFocus()`
Manually focuses the button element. Returns : `void`

getCssClasses
`getCssClasses(rootClass: string)`
Parameters :
Name | Type | Optional
rootClass | `string` | No
Returns : `string`

### Properties

Public el
Type : `ElementRef`

iconComponents
Type : `QueryList<EclIconComponent>`
Decorators : `@ContentChildren(undefined)`
List of projected icon components inside the button. Used internally to detect presence of icons.

indicator
Type : `EclIndicatorDirective`
Decorators : `@ContentChild(undefined)`
Projected indicator element inside the button (e.g., for loading or notification). Used internally to detect its presence.

### Accessors

cssClasses
get `cssClasses()`
Computes the full set of CSS classes to apply to the button element. Returns : `string`

hasIcon
get `hasIcon()`
Indicates whether the button contains an icon. Used internally for styling logic. Returns : `boolean`

hasIndicator
get `hasIndicator()`
Indicates whether the button contains an indicator element. Used internally for styling logic. Returns : `boolean`

# results matching ""

# No results matching ""