eui documentation
  1. Components
  2. EclButtonComponent

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
Methods
Inputs
HostBindings
Accessors

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
getcssClasses()

Computes the full set of CSS classes to apply to the button element.

Returns : string
hasIcon
gethasIcon()

Indicates whether the button contains an icon. Used internally for styling logic.

Returns : boolean
hasIndicator
gethasIndicator()

Indicates whether the button contains an indicator element. Used internally for styling logic.

Returns : boolean

results matching ""

    No results matching ""