### File

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

### Description

A versatile button component that supports various states, sizes, and visual styles. Can be used as either a button or anchor element with consistent styling.

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiBranding euiSecondary euiSuccess euiInfo euiWarning euiDanger euiAccent euiInverse euiVariant euiSizeS euiSizeM euiSizeL euiSizeVariant euiOutline euiRounded euiResponsive euiStart euiEnd
selector | `button[euiButton], a[euiButton]`
templateUrl | `./eui-button.component.html`
styleUrl | `./eui-button.scss`

### Index

###### Properties

- Public baseStatesDirective

###### Inputs

- e2eAttr
- euiAvatarButton
- euiBasicButton
- euiBlockButton
- euiButtonCall
- euiCTAButton
- euiDisabled
- euiIconButton
- euiLineWrap
- hasNoFocusRing
- id
- isChecked
- isCompact

###### Outputs

- buttonClick

###### HostBindings

- class

###### HostListeners

- click

###### Accessors

- cssClasses
- isChecked
- euiDisabled

### Inputs

e2eAttr
Type : `string`
Default value : `'eui-button'`

euiAvatarButton
Type : `boolean`
Default value : `false`

euiBasicButton
Type : `boolean`
Default value : `false`

euiBlockButton
Type : `boolean`
Default value : `false`

euiButtonCall
Type : `boolean`
Default value : `false`

euiCTAButton
Type : `boolean`
Default value : `false`

euiDisabled
Type : `boolean`

euiIconButton
Type : `boolean`
Default value : `false`

euiLineWrap
Type : `boolean`
Default value : `false`

hasNoFocusRing
Type : `boolean`
Default value : `false`

id
Type : `string`

isChecked
Type : `boolean`

isCompact
Type : `boolean`
Default value : `false`

### Outputs

buttonClick
Type : `EventEmitter<EuiButtonComponent>`
Event emitted when the button is clicked Emits the button component instance

### HostBindings

class
Type : `string`

### HostListeners

click
`click()`
Click event handler that emits the buttonClick event

### Properties

Public baseStatesDirective
Type : `BaseStatesDirective`
Default value : `inject(BaseStatesDirective)`

### Accessors

cssClasses
get `cssClasses()`
Computes and returns the CSS classes for the button based on its current state Returns : `string`

isChecked
get `isChecked()`
Controls the checked state of the button When true, applies accent styling Returns : `boolean`
set `isChecked(value: BooleanInput)`

Parameters :

Name | Type | Optional
value | `BooleanInput` | No

Returns : `void`

euiDisabled
get `euiDisabled()`
Controls the disabled state of the button When true, adds the disabled attribute and prevents interaction Returns : `boolean`
set `euiDisabled(value: BooleanInput)`

Parameters :

Name | Type | Optional
value | `BooleanInput` | No

Returns : `void`

# results matching ""

# No results matching ""