### File

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

### Description

A versatile button component that supports various states, sizes, and visual styles. It can be used as a native `<button>` or `<a>` element while preserving consistent EUI behavior and styling.

#### Basic buttons with variants

Example :

    <button euiButton>Default</button>
    <button euiButton euiPrimary>Primary</button>
    <button euiButton euiSecondary>Secondary</button>
    <button euiButton euiSuccess>Success</button>

#### Icon button

Example :

    <button euiButton euiIconButton aria-label="Notifications">
      <eui-icon-svg icon="bell:outline"></eui-icon-svg>
    </button>

#### CTA and block buttons

Example :

    <button euiButton euiCTAButton>Call to Action</button>
    <button euiButton euiBlockButton>Full Width</button>

#### Size variants

Example :

    <button euiButton euiSizeS>Small</button>
    <button euiButton euiSizeM>Medium</button>
    <button euiButton euiSizeL>Large</button>

#### Disabled and checked states

Example :

    <button euiButton [euiDisabled]="true">Disabled</button>
    <button euiButton [isChecked]="true">Checked</button>

#### As link

Example :

    <a euiButton href="/page">Link Button</a>

Example :

    onButtonClick(button: EuiButtonComponent): void {
      console.log('Button clicked:', button);
    }

### Accessibility

- Native button/anchor semantics preserved for screen readers
- Keyboard accessible with Enter/Space (button) or Enter (link)
- euiIconButton requires aria-label for icon-only buttons
- Disabled state prevents interaction and is announced to screen readers
- Focus ring visible by default (remove with hasNoFocusRing if alternative focus indicator exists)
- isChecked state is visually indicated and announced

### Notes

- Use on `<button>` or `<a>` elements via euiButton attribute
- Color variants: euiPrimary, euiBranding, euiSecondary, euiSuccess, euiInfo, euiWarning, euiDanger, euiInverse
- Size variants: euiSizeXS, euiSizeS, euiSizeM (default), euiSizeL
- euiBasicButton removes background for minimal styling
- euiCTAButton applies prominent call-to-action styling
- euiBlockButton makes button full-width
- euiIconButton optimizes layout for icon-only content
- euiAvatarButton styles for avatar dropdown triggers
- euiLineWrap allows multi-line button text
- isCompact reduces padding and dimensions
- euiOutline applies outline/ghost styling
- euiRounded applies rounded corners
- euiResponsive adjusts sizing based on viewport
- euiStart/euiEnd aligns content within button
- buttonClick event emits component instance on click

### Metadata

changeDetection | `ChangeDetectionStrategy.OnPush`
HostDirectives | `BaseStatesDirective` Inputs : euiPrimary euiBranding euiSecondary euiSuccess euiInfo euiWarning euiDanger euiInverse euiVariant euiSizeXS 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
- 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`

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

euiDisabled
Type : `boolean`
Controls the disabled state of the button When true, adds the disabled attribute and prevents interaction

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

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

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

id
Type : `string`

isChecked
Type : `boolean`
Controls the checked state of the button When true, applies accent styling

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`
Computes and returns the CSS classes for the button based on its current state

### 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 ""