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

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

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

Returns : string

results matching ""

    No results matching ""