### 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
el hasIcon hasIndicator iconComponents indicator
###### Methods
onFocus getCssClasses
###### Inputs
containerStyleClass eclStyle isIconOnly size variant class e2eAttr tabindex
###### HostBindings
class
###### Accessors
cssClasses

### Inputs

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

eclStyle
Type : `"highlight" | "inverted" | "neutral" | "default"`
Default value : `'default'`

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

size
Type : `"s" | "m" | "l"`
Default value : `'l'`

variant
Type : `"primary" | "secondary" | "tertiary"`
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

el
Type : `unknown`
Default value : `inject(ElementRef)`

hasIcon
Type : `unknown`
Default value : `computed(() => this.iconComponents().length > 0)`
Indicates whether the button contains an icon. Used internally for styling logic.

hasIndicator
Type : `unknown`
Default value : `computed(() => !!this.indicator())`
Indicates whether the button contains an indicator element. Used internally for styling logic.

iconComponents
Type : `unknown`
Default value : `contentChildren<EclIconComponent>(forwardRef(() => EclIconComponent))`
List of projected icon components inside the button. Used internally to detect presence of icons.

indicator
Type : `unknown`
Default value : `contentChild(forwardRef(() => EclIndicatorComponent))`
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`

# results matching ""

# No results matching ""